1.通用选择器
*或[标签名] {
属性名:属性值;
}
2.简单选择器
3. 属性选择器
拥有某一个属性 [att]
属性等于某个值 [att=val]
[attr*=val]: 属性值包含某一个值val;
[attr^=val]: 属性值以val开头;
[attr$=val]: 属性值以val结尾;
[attr|=val]: 属性值等于val或者以val开头后面紧跟连接符-;
[attr~=val]: 属性值包含val, 如果有其他值必须以空格和val分割;
4. 后代选择器
4.1. 后代选择器一: 所有的后代(直接/间接的后代)
选择器之间以空格分割
4.2. 后代选择器二: 直接子代选择器(必须是直接自带)
选择器之间以 > 分割;
5. 兄弟选择器
5.1 兄弟选择器一:相邻兄弟选择器
使用符号 + 连接
5.2 兄弟选择器二: 普遍兄弟选择器 ~
使用符号 ~ 连接
6. 选择器组 – 交集选择器
6.1 交集选择器: 需要同时符合两个选择器条件(两个选择器紧密连接)
6.2 并集选择器: 符合一个选择器条件即可(两个选择器以,号分割)
7. 伪类选择器
1.动态伪类（dynamic pseudo-classes）
:link、:visited、:hover、:active、:focus
2.目标伪类（target pseudo-classes）
:target
3.语言伪类（language pseudo-classes）
:lang( )
4.元素状态伪类（UI element states pseudo-classes）
:enabled、:disabled、:checked
5.结构伪类（structural pseudo-classes)
- :nth-child( )、:nth-last-child( )、:nth-of-type( )、:nth-last-of-type( )
- :first-child、:last-child、:first-of-type、:last-of-type
- :root、:only-child、:only-of-type、:empty
6.否定伪类（negation pseudo-classes）``
:not()
7. 所有伪类
伪类 - CSS（层叠样式表） | MDN (mozilla.org)
8. 动态伪类
8.1 使用举例
- a:link 未访问的链接
- a:visited 已访问的链接
- a:hover 鼠标挪动到链接上(重要)
- a:active 激活的链接（鼠标在链接上长按住未松开）
8.2 使用注意
- :hover必须放在:link和:visited后面才能完全生效
- :active必须放在:hover后面才能完全生效
- 所以建议的编写顺序是 :link、:visited、:hover、:active
除了a元素，:hover、:active也能用在其他元素上
8.3 :focus指当前拥有输入焦点的元素（能接收键盘输入）
因为链接a元素可以被键盘的Tab键选中聚焦，所以:focus也适用于a元素
8.4 伪类建议顺序
:link、:visited、:focus、:hover、:active
9.伪类元素
常用的伪元素有
- :first-line、::first-line
- :first-letter、::first-letter
- :before、::before
- :after、::after
◼ 为了区分伪元素和伪类，建议伪元素使用2个冒号，比如::first-line
9.1 - ::first-line - ::first-letter(了解)
- ::first-line可以针对首行文本设置属性
-
::first-letter可以针对首字母设置属性
9.2 ::before和::after
::before和::after用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片)
常通过 content 属性来为一个元素添加修饰性的内容。
10. 结构伪类
1. 结构伪类 - :nth-child
- :nth-child(1)
- 是父元素中的第1个子元素
- :nth-child(2n)
- n代表任意正整数和0
- 是父元素中的第偶数个子元素（第2、4、6、8......个）
- 跟:nth-child(even)同义
- :nth-child(2n + 1)
- n代表任意正整数和0
- 是父元素中的第奇数个子元素（第1、3、5、7......个）
- 跟:nth-child(odd)同义
- nth-child(-n + 2)
- 代表前2个子元素
2. :nth-last-child( )
-
:nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个子元素开始往前计数
- :nth-last-child(1)，代表倒数第一个子元素
- :nth-last-child(-n + 2)，代表最后2个子元素
-
:nth-of-type()用法跟:nth-child()类似
- 不同点是:nth-of-type()计数时只计算同种类型的元素
-
:nth-last-of-type()用法跟:nth-of-type()类似
- 不同点是:nth-last-of-type()从最后一个这种类型的子元素开始往前计数
3. 其他常见的伪类
:first-child，等同于:nth-child(1)
:last-child，等同于:nth-last-child(1)
:first-of-type，等同于:nth-of-type(1)
:last-of-type，等同于:nth-last-of-type(1)
:only-child，是父元素中唯一的子元素
:only-of-type，是父元素中唯一的这种类型的子元素
:root，根元素，就是HTML元素
:empty代表里面完全空白的元素
11. 否定伪类
- :not()的格式是:not(x)
- x是一个简单选择器
- 元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类（除否定伪类）
- :not(x)表示除x以外的元素
