计算选择器的权重

下面的代码，文字显示什么颜色？

<style>
#red {
    color: red;
}
.yellow {
    color: yellow;
}
p.yellow {
    color: black;
}
</style>
<p id="red" class="yellow">颜色</p>

文字是红色的，即便黄色，黑色定义在红色之后，但是id定义的样式权重高，因此显示id定义的颜色。

计算选择器的权重规则：

• 如果样式来自标签style属性，那么权重加1000；
• 如果来自id定义的，那么权重加100*数量；
• 如果来自其它属性、类和伪类，那么权重加10*数量；
• 如果来自元素名和伪元素的数量，那么权重加1*数量；

注意：通用选择器（），子选择器（>）和相邻同胞选择器（+）并不在这四个规则中，所以他们的权值都为0。*

权重的计算示例：

如果权重一样大，后面的样式覆盖前面的样式。否则，显示权重大的样式规则。