应用了大量的CSS样式导致某些关于样式的优先级出现了问题,我这里就不写一堆堆了,单纯的从优先权重的计算方式来辨别下CSS,感兴趣的朋友可以了解下
最近开发项目的时候因为应用了大量的CSS样式导致某些关于样式的优先级出现了问题,于是又回过头去翻别人的文章和W3C上关于CSS优先权重的计算方法,关于代码的测试,有兴趣的朋友可以按照计算方式单独编写代码进行测试,我这里就不写一堆堆了,单纯的从优先权重的计算方式来辨别下CSS
关于W3C标准中的计算 是将CSS的选择器分为四组 即 a b c d 每一个样式的缩写就成了 CSS{a,b,c,d} a表示内联样式 b是Id选择器 c是类元素 伪类以及其他一切非元素对象 d是元素
再确定哪条一条样式起作用的时候 参照的第一个原则是 a>b>c>d 比较的顺序就是 从左往右,可以理解为如果a 比较除了结果 就不再比较b 例如{0,6,3,3}和{1,3,3,3}总数上是第一条大 但是第二是一个内联样式 所以第二条起作用 第一条无效 以此类推 相继比较即可
除此之外还有几条规则 即同样的权重下 后面覆盖前面,这也可以理解为 同一个样式的简写声明中 同一个属性 如果你重复写了 那么后面的将覆盖掉前面的定义,如果有不明白或有不同看法的同学可以留言 欢迎讨论! |