1.元素选择器
(1)通用选择器: * 选择到所有的元素;
(2)选择子元素: > 选择到元素的直接后代
(3)相邻兄弟选择器: + 选择到紧随目标元素后的第一个元素
(4)普通兄弟选择器: ~ 选择到紧随其后的所有兄弟元素
2.关系选择器
(1)child类型
:first-child 选择父元素下的第一个子元素
:last-child 选择父元素下的最后一个子元素
:only-child 选择父元素下唯一的子元素
:nth-child(n) 父元素下的第n个子元素
:nth-child(odd)/nth-child(2n-1)奇数子元素
:nth-child(even)/nth-child(2n)偶数子元素
nth-child(an+b)公式
:nth-last-child(n) 倒数第n个子元素
(2)of-type
:nth-of-type(n) 父元素下的第n个指定类型的子元素
:nth-last-of-type(n) 父元素下的倒数第n个指定类型的子元素
3.属性选择器
(1)E[attr] 属性名,不确定具体属性值
(2)E[attr="value"] 指定属性名,并指定其对应属性值
(3)E[attr ^= "value"] 指定属性名,属性值以value开头
(4)E[attr $="value"] 指定属性名,属性值以value结束
(5)E[attr *="value"] 指定了属性名,属性值中包含了value
4.伪类选择器
(1)UI伪类选择器
:enabled 选择启用状态元素
:disabled 选择禁用状态元素
:checked 选择被选中的input元素
(2)动态伪类选择器
:link 选择链接元素
:visited 选择用户以访问的元素
:hover 鼠标悬停其上的元素
:ative 鼠标点击时触发的事件
:focus 当前获取焦点的元素
(3)其他伪类选择器
:not(<选择器>) 对括号内选择器的选择取反,比如 li:not(:last-chid)
:target url片段标识符指向的元素
:empty选择内容为空的元素
:selection 鼠标光标选择元素内容
::first-line 匹配文本块的首行
::first-letter 选择文本块的首字母