前端开发之-------------合理利用CSS的权重----------------
什么是CSS的权重?对于前端工程师来说,这是一个很基础的问题,如果前端工程师没有深刻理解这个概念,则很难写出高质量的CSS代码。
那么到底什么是CSS的权重呢?我们又怎么来进行判定CSS的权重呢?
讨论CSS的权重,则必须想了解而且是深刻的了解CSS样式的6种基础选择器:ID选择器、类选择器、属性选择器、伪类和为对象选择器、标签选择器以及统配选择器。所有在CSS样式中定义的选择符都是由这6种基础选择符组合而成的,组合的方式也分为三种:后代选择符、子选择符、相邻选择符。(如果希望更详细的认识选择器的话点击(CSS选择器);
CSS的权重指的是这些选择符的优先级,优先级高的CSS样式会覆盖优先级低的样式,优先级越高说明权重越高,反之亦然。
计算CSS的权重是有一定的规则的。根据W3C指定的CSS规范,CSS权重是通过如下规则计算的:
1)计算选择符中的ID选择器的数量(=a)。
2)计算选择符中的类选择器、属性选择器以及伪类选择器的数量(=b)。
3)计算标签类型选择器和伪对象选择器的数量(=c)。
4)忽略全局选择器。
按照规则,基础选择器具有这样的优先级:
ID > 类 | 伪类 | 属性选择 > 标签类型 | 伪对象 > 通配符
* /* a=0 b=0 c=0 -> 权重 = 0 */
li /* a=0 b=0 c=0 -> 权重 = 0 */
ul li /* a=0 b=0 c=0 -> 权重 = 0 */
ul ol+li /* a=0 b=0 c=0 -> 权重 = 0 */
h1 + #[rel=up] /* a=0 b=0 c=0 -> 权重 = 0 */
ul ol li.red /* a=0 b=0 c=0 -> 权重 = 0 */
li.red.level /* a=0 b=0 c=0 -> 权重 = 0 */
#x34y /* a=0 b=0 c=0 -> 权重 = 0 */
#s12:not[foo] /* a=0 b=0 c=0 -> 权重 = 0 */
注意:如果两个选择符的权重相同,则可依照“就近原则”来判断。
明白了CSS选择符的权重后,我们如何依照选择符的权重定义合适的选择符?
定义选择符的原则是:尽量使选择付的权重低,目的是保证样式在应用于多个元素时容易被覆盖,这可提高样式代码的重用性和可维护性。
具体的原则如下:
(1)CSS样式中尽量不要使用ID选择器
ID选择器ijuyou很高的权重,如果要覆盖使用了ID选择器的样式,就必须在原先使用ID选择器的基础上添加新的选择符(类选择器或者标签类型选择器或者额使用个!important,但这样做的结果是无法重用的样式代码会越来越多。
(2)减少子选择器的层级
减少选择器的层级的过程也是降低选择符整体权重的过程。
(3)使用组合的CSS类选择器
使用CSS选择器组合的方式,开发者可以不用考虑CSS样式覆盖的问题,避开了计算选择符权重的过程,同时也提高了代码的重用性。