选择器是制作网页效果非常重要的一部分，学会对选择器的使用，对网页效果图的控制至关重要。
下面主要罗列的几个选择器：
- 基础选择器
- 组合选择器
- 属性选择器
- 伪类选择器
- 伪元素选择器
=====================
| 1、基本选择器 | 作用 |
|---|---|
* |
通用选择器，匹配所有元素 |
tagName |
元素（标签）选择器，对应标签名为tagName的标签进行样式设置 |
.className |
类选择器，对应类名为className的部分 |
#IDname |
ID选择器，对应ID名为IDname的部分 |
选择器书写和样例可以参考： CSS选择器 - MDN
| 2、组合选择器 | 作用 |
|---|---|
tagname1，tagname2 |
多元素选择器，同时匹配所有tagname1或2，两个（或多个）之间用逗号分隔 |
T1 T2 |
后代元素选择器，匹配所有属于T1元素后代的F元素，T1\T2之间用空格分隔 |
T1>T2 |
子元素选择器，匹配所有T1元素的直接子元素T2 |
T1+T2 |
直接相邻选择器，匹配紧随T1元素之后的同级元素T2（仅选中一个） |
E~F |
普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否） |
.class1.class2 |
id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素。这样子仅选中一个元素 |
空格与大于号的区别需要注意，且可以通过>这种组合方法来使得匹配更加严格。
直接相邻选择器仅选中一个同类元素，而普通相邻选择器选中不止一个元素且不需要直接（紧密）相邻。
| 3、属性选择器 | 作用 |
|---|---|
| E[attr] | 匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div |
| E[attr = value] | 匹配属性attr值为value的元素，div[id=test],匹配id=test的div |
| E[attr ~= value] | 匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素 |
| E[attr ^= value] | 匹配属性attr的值以value开头的元素 |
| E[attr $= value] | 匹配属性attr的值以value结尾的元素 |
| E[attr *= value] | 匹配属性attr的值包含value的元素 |
注：这部分内容和正则的使用相关
| 4、伪类选择器 | 作用 |
|---|---|
E:first-child |
匹配父元素的第一个子元素 |
E:link |
匹配所有未被点击的链接 |
E:visited |
匹配所有已被点击的链接 |
E:active |
匹配鼠标已经其上按下、还没有释放的E元素 |
E:hover |
匹配鼠标悬停其上的E元素 |
E:focus |
匹配获得当前焦点的E元素 |
E:nth-child(n) |
匹配E的父元素的第n个子元素，第一个编号为1 |
E:last-child |
匹配父元素的最后一个子元素，等同于:nth-last-child(1) |
伪类选择器往往表示元素的一个状态，对不同状态进行css设置。除了上述常用的之外，还有E:enabled/disabled 来 匹配表单中可用/禁用的元素 ; E:checked匹配表单中被选中的radio或checkbox元素; E::selection 匹配用户当前选中的元素。
关于E:nth-child(n)， 注意E元素必须得有父元素，然后它会寻找同类的元素E（类名E或者标签名E相同），若在寻找时第n个位置被不同元素的位置占有则不生效。下图中将.two类移到除第二个以外的位置均生效，但在算第n个时它也是占位的。
n的取值可以是 ：
- 1，2，3，4，5 ...
- 4n+1,4n+2,4n+3,4n+4..etc （每四个设置不同的样式）
- odd（奇数）, even（偶数）
注意两者区别（空格）
div:first-child 选择div父元素下的第一个且是div的子元素
div :first-child 选择div元素下的第一个子元素
div:first-of-type 选择的是父元素下每一类的第一个，例如下例子中被选中的是p[a]&h3[b]
<style>
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">a</p>
<h3 class="item1">b</h3>
<h3 class="item1">c</h3>
</div>
a:link, a:hover, a:active, a:visited 的书写顺序及原因
书写顺序 ：
- a:link
- a:visited
- a:hover
- a:active
因为上面四个样式的权重是一样，写在后面的样式会覆盖前面的样式。即触发了后面的事件后若无释放则会一直覆盖前面的样式，说到底还是CSS层叠性的问题：
- 若无任何操作，则显示
a:link - 若已经访问，则
a:visited会覆盖a:link，所以a:visited在a:link之后（若把a:visited放在最后，则触发过visited之后前面的样式就会被覆盖了无法再次触发） - 无论是否访问，鼠标经过时
a:hover需要生效，所以写在a:link和a:visited后 - 当点击时则只会显示
a:active，所以写在最后
| 5、伪元素选择器 | 作用 |
|---|---|
E::first-line |
匹配E元素内容的第一行 |
E::first-letter |
匹配E元素内容的第一个字母 |
E::before |
在E元素之前插入生成的内容 |
E::after |
在E元素之后插入生成的内容 |
可以两个冒号也可以一个冒号，老IE对两个冒号不兼容，但两个冒号是CSS3的新写法，更加规范。
注意对于伪元素选择器，必须加content属性，如下例，则content中的内容会加入到main内部，作为第一个子元素，内容是necessary
.main::before {
content: "necessary"; }
部分参考： CSS选择器笔记 - 阮一峰
=====================
<br />
选择器的使用经验
- 遵守 CSS 书写规范（可参考这篇文章）
- 使用合适的命名空间
- 合理的复用class
选择器的优先级
- !important
- 内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
