css样式渲染规则

css选择符是有权重的。作用于同一标签的样式同一属性，究竟哪个能起到作用，而哪个会被覆盖掉，这就跟css选择符权重有关了。

在说明权重之前，必须强调一点，那就是css样式规则渲染是先就近渲染，然后才依据选择符权重进行渲染。

看看什么是就近渲染原则：

html：

<div id="test">
    <p>测试字体颜色</p>
</div>

css：

#test { color:red; }
p { color:blue; }

请问，段落p的字体颜色是红色还是蓝色？

答案是，显示蓝色。

无论div#test的权重有多大，依据就近原则，p就显示蓝色。

简单描述什么是css选择符权重渲染规则：important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 >通配符 > 继承

然后，有必要警告下，网络传言的权重加法规则是坑爹的。什么id权重是100，class是10，去你大爷的。这里权重不存在加法规则。

这样认识是正确的：

0,1,0,0 的优先级比 0,0,1,1的优先级高。

如果按照加法规则来看，一个id的权重还不及11个class的权重高，这就很坑爹了。

引用一个恰当的比喻：

用个比较形象的比喻，选择器的优先级犹如奥运的奖牌榜，id，class，标签，你可以理解为金牌，银牌，铜牌，得了一个金牌，在奖牌榜上的排名永远比你得了多少个银牌来的高。

具体讨论详见css forest中鬼哥的：重新认识css权重

小志的CSS selector 认识：关于css selector的优先级

小李刀刀的：深入解析CSS样式层叠权重值

补充：渲染规则还包括：

• style中import的样式规则，和同一规则产生冲突（权重一致），则import的规则无效
• style,link,import同一规则，依照从上到下的顺序就近渲染。

此点详见：关于外部样式的权重

转载于:https://www.cnblogs.com/my_front_research/archive/2013/01/07/2849874.html