CSS选择器

1 基本选择器

选择器	说明
ID	ID选择器
.class	类选择器

2 伪类选择器

选择器	说明
:link	向未被访问的链接添加样式
:hover	鼠标悬停时选中元素上时
.class	类选择器
:active	向被激活的元素添加样式
:focus	向拥有焦点的元素添加样式，用户可以通过键盘或鼠标激活焦点
:visited	向已被访问的链接添加样式
:first-child	向元素的第一个子元素添加样式
:lang	向带有指定 lang 属性的元素添加样式
:nth-child(an+b)	匹配在文档树中前面有an+b个兄弟元素的元素
:nth-last-child(an+b)	与:nth-child类似，只不过从后面开始匹配
:nth-of-type(an+b)	与:nth-child类似
:first-of-type	等同于:nth-of-type(1)
:last-of-type	等同于 :nth-last-of-type(1)
：empty	代表没有子元素的元素。 这里说的子元素，只计算元素结点及文本（包括空格），注释、运行指令不考虑在内。
:target	匹配被视为目标的元素
:checked	被选中的元素
:enabled	匹配被启用的元素
:disabled	匹配disable状态的元素

2.1 nth-child 伪类

n时计数器从0开始，b是偏移，匹配an+b位置上的兄弟元素,第一个元素索引是1

示例

• 1n+0，或n，匹配每一个子元素。
• 2n+0，或2n，该表达式与关键字even等价。
• 2n+1, 该表达式与关键字odd等价。
• 3n+4匹配位置为4、7、10、13…的子元素。
• tr:nth-child(odd) :表示HTML表格中的奇数行　
• nth-child(-n+3) : 匹配前三个子元素
• nth-child(1) : 匹配第一个元素

2.2 nth-child 与 nth-of-type的区别

ele:nth-of-type(an+b)匹配父元素下第(an+b)个ele元素。    
ele:nth-child(an+b) 匹配父元素下第(an+b)个元素，如果这个元素不是ele元素，则匹配失败。

3 关系选择器

选择器	说明
A E	元素A的任一后代元素E
A > E	元素A的任一子元素E(也就是直系后代)
E:first-child	任一是其父母结点的第一个子节点的元素E
B + E	元素B的任一下一个兄弟元素E
B ~ E	B元素后面的拥有共同父元素的兄弟元素E

参考文档

MDN 选择器
W3C CSS

---

欢迎大家访问我的博客，转载请注明出处
http://blog.youkuaiyun.com/abyss521