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同一规则,依照从上到下的顺序就近渲染。
此点详见:关于外部样式的权重