老调重弹的CSS优先级

2020-05-12 07:33:44易采站长站整理
.apple {color:red;}10p.bright {color:yellow;}1+10=11p.bright em.dark {color:brown;}1+10+1+10=22#id316 {color:yellow}100

  通过上面,就可以很简单的看出,HTML标记的权重是1,CLASS的权重是10,ID的权重是100,继承的权重为0(后面会讲到)。

  按这些规则将数字符串逐位相加,就得到最终的权重,然后在比较取舍时按照从左到右的顺序逐位比较。

  优先级问题其实就是一个冲突解决的问题,当同一个元素(内容)被CSS选择符选中时,就要按照优先级取舍不同的CSS规则,这其中涉及到的问题其实很多。

  说到这里,我们不得不说一下CSS的继承性。

  四、CSS的继承性

  4.1 继承的表现

  继承是CSS的一个主要特征,它是依赖于祖先-后代的关系的。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。

样式定义:body {color:#f00;}
举例代码:<p>CSS<strong>继承性</strong>的测试</p>
举例效果:

  这段代码的应用结果是:“CSS继承性的测试”这段话是红颜色的,“继承性”几个字由于应用了<strong>标签,所以是粗体。很显然,这段文字都继承了由body {color:#f00;}样式定义的颜色。这也就是为什么说继承性是CSS的一部分。

  然而CSS继承性的权重是非常低的,是比普通元素的权重还要低的0。

  我们仍以上面的举例代码为例:在样式定义中添加一条:strong {color:#000;}。

举例效果:

  发现只需要给<strong>加个颜色值就能覆盖掉它继承自<body>的样式颜色。由此可见:任何显示申明的规则都可以覆盖其继承样式。

  4.2 继承的局限性

  继承是CSS重要的一部分,我们甚至不用去考虑它为什么能够这样,但CSS继承也是有限制的。

  有一些属性不能被继承,如:border, margin, padding, background等。

样式定义:div {border:1px solid #000;}
举例代码:<div>我是<em>border</em>我是不能被继承滴</div>
预期效果:
实际效果:

  从上面的效果中,我们可以看出,border是不能被继承的,还有一些其它的属性也是如此,这里就不一一列举。