HTML基本理解day9 | 青训营笔记

简介: HTML基本理解day9 | 青训营笔记

1.2子选择器


子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。 语法:

元素1>元素2{样式声明}
复制代码

上述语法表示示选择元素1里面的所有直接后代(子元素)元素2 例如:

div>p{样式声明} /* 选择div里面所有最近一级p标签元素 */
复制代码

元素1和元素2中间用大于号隔开

元素1是父级,元素2是子级,最终选择的是元素2

元素2必须是亲儿子,其孙子、重孙之类都不归他管你也可以叫他亲儿子选择器


1.3并集选择器(重要)


并集选择器可以选择多组标签,同时为他们定义相同的样式。通常用于集体声明 并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分。语法:

元素1,元素2{ 样式声明 }
上述语法表示选择元素1和元素2。
例如:
ul,div{样式声明 } /* 选择ul和 div标签元素 */
复制代码

元素1和元素2中间用逗号隔开,逗号可以理解为和的意思,并集选择器通常用干集体声明


1.4伪类选择器


伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。 伪类选择器书写最大的特点是用冒号(:)表示,比如:hover、:first-child。


1.5链接伪类选择器


1670048691791.jpg

链接伪类选择器注意事项 1.为了确保生效,请按照 LYHA的循顺序声明:

link-:visited-:hover-:active。
复制代码

2.记忆法:lovehate或者lv包包hao。

3.因为a链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式。


1.6focus伪类选择器


:focus 伪类选择器用于选取获得焦点的表单元素 焦点就是光标,一般情况< input>类表单元素才能获取,因此这个选择器也主要针对于表单元素来说。

input:focus {
background-color:yellow
}
复制代码


1.7复合选择器

1670048713972.jpg


CSS的元素显示模式


作用:网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页。

元素显示模式就是元素(标签)以什么方式进行显示,比如

自己占一行,比如一行可以放多个< span> HTML元素一般分)为块元素和行内元素两种类型。

相关文章
|
29天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
23 1
|
29天前
|
移动开发 前端开发 搜索推荐
HTML图片标签(2) HTML5+CSS3+移动web 前端开发入门笔记(三)
HTML图片标签(2) HTML5+CSS3+移动web 前端开发入门笔记(三)
25 0
|
2月前
|
JavaScript 前端开发
编程笔记 html5&css&js 079 JavaScript 循环语句
编程笔记 html5&css&js 079 JavaScript 循环语句
|
2月前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 078 JavaScript 条件判断语句
条件判断语句是首先要接触的语句。通过条件判断来执行不同的代码块。
|
2月前
|
JavaScript 前端开发 编译器
编程笔记 html5&css&js 077 Javascript 关键字
编程笔记 html5&css&js 077 Javascript 关键字
|
2月前
|
JavaScript 前端开发
编程笔记 html5&css&js 076 Javascript 表达式
编程笔记 html5&css&js 076 Javascript 表达式
|
2月前
|
存储 JavaScript 前端开发
编程笔记 html5&css&js 075 Javascript 常量和变量
编程笔记 html5&css&js 075 Javascript 常量和变量
|
2月前
|
JavaScript 前端开发 程序员
编程笔记 html5&css&js 074 Javascript 运算符
编程笔记 html5&css&js 074 Javascript 运算符
|
2月前
|
JavaScript 前端开发 Java
编程笔记 html5&css&js 073 JavaScript Object数据类型
编程笔记 html5&css&js 073 JavaScript Object数据类型
|
2月前
|
存储 JavaScript 前端开发
编程笔记 html5&css&js 072 JavaScript BigInt数据类型
编程笔记 html5&css&js 072 JavaScript BigInt数据类型