下面的代码，文字显示什么颜色？
<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。*
权重的计算示例：
| 选择器 | 权重 |
|---|---|
| * {} | 0 |
| li{} | 1 |
| li:first-line{} | 2 |
| ul li {} | 2 |
| ul ol+li {} | 3 |
| h1 + *[rel=up]{} | 11 |
| ul ol li.red{} | 13 |
| li.red.level {} | 21 |
| #red{} | 100 |
| style="" | 1000 |
如果权重一样大，后面的样式覆盖前面的样式。否则，显示权重大的样式规则。
