伪类选择器
除去众所周知的 类选择器 和 ID 选择器外，还有相对接触不那么频繁的 伪类选择器和 伪元素选择器。而提起伪类选择器，大家可能首先想到 :hover/visited/active/focus 四种状态伪类，便没了下文，实际上伪类选择器是个大家族，这里有一份标准伪类列表。
基于关系的选择器
- 关系选择器比较容易令人忽视的就是 A E / A>E 的区别了，前者是匹配了A的所有后代元素E，而后者匹配的是 A 的所有直系后代元素 E。
- 第二个容易令人混淆的就是 B + E 和 B ~ E，二者都针对的兄弟元素(不包括自己)。请看如下例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.text2 + span {
color: blue;
}
.text4 ~ span {
color: red;
}
</style>
</head>
<body>
<div class="warp" id="wrap">
<span class="text1">1</span>
<span class="text2">2</span>
<span class="text3">3</span>
<span class="text4">4</span>
<span class="text5">5</span>
<span class="text6">6</span>
</div>
</body>
</html>。
最终结果:
- 对 + 而言，匹配的是——指定元素（.text2 选择的元素)的下一个，能匹配 span 选择器的兄弟元素。(也就是说下一个兄弟元素不是 p 标签，那匹配规则是不生效的。)
- 而 ~ 则匹配的是——指定元素（.text4 匹配的元素）后的(所有)，能匹配 span 选择器的兄弟元素。
说白了就是后一个和后多个的问题，二者都是对兄弟元素声明规则，但不是对自己声明规则。
优先级计算
之前一直含糊的认为，优先级是个数值，数值越大优先级越高，其中一个id选择器赋值1000，类选择器赋值100，标签选择器赋值1，含糊的累加计算来确定优先级。
CSS3中选择器的优先级如下计算：
- 获取选择器中ID选择器的个数，赋值给a
- 获取选择器中类选择器，属性选择器([type="text"])和伪类选择器(:hover)的个数，赋值给b
- 获取选择器中标签(type)选择器和伪元素选择器(::before)的个数，赋值给c
- 通用选择器(*)不占优先级权重
将abc三个数串联成一个基数绝对大的数字(既无论数字再大也不进位)。
#btn.red //a=1,b=1,c=0 =>specificity = 110
.big li //a=0,b=1,c=1 =>specificity = 11
ul li //a=0,b=0,c=2 =>specificity = 2
如果两个specificity值一样呢？那自然是看样式表中出现的先后顺序，后者可以覆盖前者的样式。
给元素添加的内联样式 (例如, style="font-weight:bold") 总会覆盖外部样式表的任何样式 ，因此可看作是具有最高的优先级（不包括!important）。
!important除外
当在一个样式声明上使用 !important 规则(虽然不鼓励用)时，该样式声明会覆盖CSS中任何其他的声明(包括内联样式)。
想要覆盖 !important 只能再增加一条带 !important 的 CSS 规则。
基于声明形式的优先级
<style>
//二者都是以 id 属性做为辨识信息的选择器，但是前者以 id 选择器的形式，后者以属性的形式声明
#id{ color: "red";}
[id="milk"]{ color: "green"}
</style>
<div id="milk">牛奶</div>
最终这个div的color仍然是 red，因为 [id="milk"]是以属性选择器来添加权重的。
容易令人误解的点
如下例子:
@question 这里两个选择器，前者对应的优先级值 假设是 0/0/2 后者不应该是 0/1/1 吗，按理后者优先级更高，但是实际 span 标签的颜色 是 红色的。
div span{
color:red;
}
div:first-child{
color:blue;
}
这是为什么呢？
实际上当你在确定一个元素的样式表时，首先要考虑的并不是优先级；只有当同一个元素，有多个样式声明时，这时候考虑优先级才有意义。
请看如下例子:
<style>
#wrap {
color: red;
}
span {
color: blue
}
</style>
...
<body>
<div class="warp" id="wrap">
<span class="text1">233</span>
<span class="text3">text3</span>
<p>
<span class="text2">466</span>
</p>
</div>
这里的 span 元素的 color 会是什么颜色呢？
最终都是蓝色。
这里的 color: red; 是属于继承而来的颜色，在 CSS 规则中直接作用于元素的 样式声明总是会 覆盖 从祖先元素继承而来的规则。
当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的CSS规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。来自MDN
参考阅读：
