特指度的计算
- 行内样式的特指度 1,0,0,0
- ID选择器 0,1,0,0
- 类、属性、伪类0,0,1,0
- 元素、伪元素0,0,0,1
- 通用选择符 0,0,0,0
- 连结符 没有特指度
比较时只要前一位上的特指度大，就不用再看后面的了。如 0,1,0,0 大于 0,0,19,0。如果特指度相同则通过层叠选择，谁在后面谁胜出。
以上所有选择器是非重要声明，增加!important 的属性是重要声明。重要声明与非重要声明冲突时，重要声明始终胜出。重要声明冲突了比谁的特指度大。特指度一样的通过层叠关系，后声明的胜出。
注意: 我们定义属性时是成组的，但是并不意味着浏览器在应用样式时只是成组的应用。它会将每一组规则打散，每一个属性就是一个规则。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1 + p {
color: rosybrown;
font-size: 40px;
}
p {
color: white;
background-color: saddlebrown;
}
</style>
</head>
<body>
<h1>welcome</h1>
<p>hello</p>
</body>
</html>
上面的例子中的样式首先会被分解成如下
h1 + p {color: rosybrown;}
h1 + p {font-size: 40px;}
p {color: white;}
p {background-color: saddlebrown;}虽然选择器 p 的特指度小于 h1 + p ，但是对于background-color属性仍然能应用到p标签上。因为对于background-color这个规则来说，它的特指度就是最大的，因为没有人和它争。
继承
可以继承的属性：字体属性 font font-size font-weight等。文本属性 color text-align line-height text-indent(缩进) 。绝大部分的盒模型属性不可以被继承
内联元素不可以继承：text-indent、text-align 块级元素可以
注意：继承来的属性没有特指度。通用选择符的特指度是0。通用选择符的属性会覆盖继承来的属性，因此谨防通用选择符的滥用
层叠
链接的伪类样式顺序决定了不同效果。因为如下的选择器的特指度是一样的，都是0,0,1,1，只能通过层叠关系确定样式。可以说 一个连接 无论是否触发focus hover active ，它仍是link visited中的一种。因此将这两个放在前面，当用户交互触发其它伪类时，这两个的样式能被覆盖。如果我们将link 放在最后，那么对于一个没有访问的链接，他的样式将永远是a:link 对应的属性。另外 active状态的一定是hover状态。因此hover伪类要在前面。
a:link{}
a:visited{}
a:focus{}
a:hover{}
a:active{}