CSS进阶篇——具体性 (specificity)

如果同一个 HTML 元素上有多个 CSS 规则，当它们互相冲突时，浏览器会遵循一定的规则来找到最具体的那条规则，并舍弃与之冲突的其它规则。

这个功能在 CSS 比较少的情况下，用处不大，因为几乎不会有冲突。但随着 CSS 越来越复杂，文件越来越多，发生冲突的可能性就会变大，这个功能就会变得很重要。

更具体 = 更高优先级

同样的选择器，定义在后面的优先级更高：

p { color: red }
p { color: blue }

浏览器最终会选择第二个选择器，也就是

元素内的文本会为绿色。

但是上面这种写法并不常见，因为没有人会定义两个一样的选择器。这类冲突更多发生在嵌套选择器中：

div p { color: red }
p { color: blue }

如果按照选择器定义的顺序来看优先级，上例中