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.csdn.net/abyss521