CSS选择器

选择器是制作网页效果非常重要的一部分，学会对选择器的使用，对网页效果图的控制至关重要。

下面主要罗列的几个选择器：

1. 基础选择器
2. 组合选择器
3. 属性选择器
4. 伪类选择器
5. 伪元素选择器

=====================

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个时它也是占位的。

E:nth-child(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层叠性的问题：

1. 若无任何操作，则显示a:link
2. 若已经访问，则a:visited会覆盖a:link，所以a:visited在a:link之后（若把a:visited放在最后，则触发过visited之后前面的样式就会被覆盖了无法再次触发）
3. 无论是否访问，鼠标经过时 a:hover需要生效，所以写在a:link和a:visited后
4. 当点击时则只会显示 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

选择器的优先级

1. !important
2. 内联样式
3. id选择器
4. 类选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通配符选择器
9. 浏览器自定义