在开始之前
在写前端样式的时候，CSS选择器是非常重要的。阮一峰老师的文章很全面的介绍了各种选择器，为了方便自己使用，本文章摘抄了部分在开发过程中最为常见的部分，又通过阅读思否的文章补充了选择器的权重相关内容。
常见选择器
一、基本选择器
| 序号 | 选择器 | 含义 |
|---|---|---|
| 1. | * | 通用元素选择器，匹配任何元素 |
| 2. | E | 标签选择器，匹配所有使用E标签的元素 |
| 3. | .info | class选择器，匹配所有class属性中包含info的元素 |
| 4. | #footer | id选择器，匹配所有id属性等于footer的元素 |
二、多元素的组合选择器
| 序号 | 选择器 | 含义 |
|---|---|---|
| 5. | E,F | 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 |
| 6. | E F | 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 |
| 7. | E > F | 子元素选择器，匹配所有E元素的子元素F |
| 8. | E + F | 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F |
三、CSS 2.1中的伪类
| 序号 | 选择器 | 含义 |
|---|---|---|
| 9. | E:first-child | 匹配父元素的第一个子元素 |
| 10. | E:link | 匹配所有未被点击的链接 |
| 11. | E:visited | 匹配所有已被点击的链接 |
| 12. | E:active | 匹配鼠标已经其上按下、还没有释放的E元素 |
| 13. | E:hover | 匹配鼠标悬停其上的E元素 |
| 14. | E:focus | 匹配获得当前焦点的E元素 |
| 15. | E:lang(c) | 匹配lang属性等于c的E元素 |
四、CSS 3中的结构性伪类
| 序号 | 选择器 | 含义 |
|---|---|---|
| 16. | E:root | 匹配文档的根元素，对于HTML文档，就是HTML元素 |
| 17. | E:nth-child(n) | 匹配其父元素的第n个子元素，第一个编号为1 |
| 18. | E:nth-last-child(n) | 匹配其父元素的倒数第n个子元素，第一个编号为1 |
| 19. | E:nth-of-type(n) | 与:nth-child()作用类似，但是仅匹配使用同种标签的元素 |
| 20. | E:nth-last-of-type(n) | 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素 |
| 21. | E:last-child | 匹配父元素的最后一个子元素，等同于:nth-last-child(1) |
| 22. | E:first-of-type | 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1) |
| 23. | E:last-of-type | 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1) |
选择器权重
- 内联样式，如: style="..."，权值为
1000。 - ID选择器，如：#content，权值为
0100。 - 类，伪类、属性选择器，如.content，权值为
0010。 - 类型选择器、伪元素选择器，如div p，权值为
0001。 - 通配符、子选择器、相邻选择器等。如
* > +，权值为0000。 - 继承的样式没有权值
来源：CSS选择器笔记
来源：CSS中选择器的权重值
