# 1.基础选择器
# 1.1. ID选择器
ID选择器使用 "#" 号加ID名称xx来表示,用来选择HTML 中的id="xxx"的DOM元素
# 1.2. 类选择器
类选择器我们是用 “.” 加上claa名称来表示,用来选择HTML中的class="xx"的DOM元素。
# 1.3. 通配符选择器
通配符选择器使用 * 来选择页面里面的所有元素
# 1.4. 标签选择器
标签选择器就是选中HTML中某一种类的标签,直接使用HTML中的标签名作为肖泽强的名称
# 1.5. 属性选择器
属性选择器通过DOM的属性来选择DOM节点,属性选择器用括号"[]"包裹
# 2.组合选择器
# 2.1. 后代选择器
后代选择器是用空格分隔多个选择器组合,它的作用是在A选择器的后代中找到B选择器所指的元素
# 2.2. 子元素选择器
子元素选择器和后代选择器类似,不过子元素只找子元素,不会把所有的后代都找一遍
# 2.3. 相邻兄弟选择器
相邻兄弟选择器是用来选取某个元素紧邻的兄弟元素,它的语法是"选择器A + 选择器B"
# 2.4. 通用兄弟选择器
通用兄弟选择器和相邻兄弟选择器很相似,它的语法是"选择器A ~ 选择器B",会匹配选择器A后面所有符合选择器B的元素
# 2.5. 交集选择器
交集选择器是为了找两个或多个选择器的交集,用法就是把两个选择器放在一起,法语"选择器A选择器B"
# 2.6. 并集选择器
并集选择器是为了合并类型的样式,可以是选择器不用单样式相同的CSS语法块合并。并集选择器就是用多个逗号分隔多个选择器,如"选择器A,选择器B"
# 3.伪类和伪元素选择器
# 3.1. 标记状态的伪类
:link 选取未访问过的超链接
:visited 选取访问过的连接
:hover 选取鼠标悬浮的元素
:active 选取点中的元素
:focus 选取获取焦点的元素
# 3.2. 筛选功能的伪类
:empty 选取没有子元素的元素
:checked
选取勾选状态下的input 元素 只对 radio 和checkbox 有效
:disabled 选取禁用的表单元素
:first-child 选取当前选择器下的第一个元素
:last-child 选取当前选择器下的最后一个元素
:nth-child(an+b) 选取指定位置的元素,参数支持an+b的形势.比如 li:nth(2n+1),就可以选取li元素序号是2的整数倍+1的所有元素,也就是1,3,5,7,9序号的li元素
:nth-last-child(an+b) 和上面类似,不过从后面选取.
:only-child 选取元素唯一的子元素,如果元素的父元素只有它一个子元素就会生效,如果还有其他的兄弟元素,则不生效
:only-of-type选取唯一的某个元素类型。如果元素的父元素只有它一个当前类型的子元素就会生效。
# 3.3. 伪元素选择器
::first-line为元素的第一行使用样式
::first-letter为某个元素的首字母或第一个文字使用样式
::before在某个元素之前插入内容
::after在某个元素之后插入内容
::selection对光标选中的元素添加样式
# 注意:
1.伪元素构造的元素是虚拟的,所以不能使用js去操作
2.first-line和first-letter不使用于内联样式,在内联样式中都会失效
3.如果同时使用了 befor 和first-letter. 第一个内容要从before中算起,如果before 中第一个为非文本内容,那first-letter也会作用到这个非文本内容上,但不会生效。
4.在CSS3 中规定, 伪类用一个冒号 (😃 表示, 伪元素用两个冒号 (::)来表示