css样式优先级

css优先级规则

important > 行内样式 > id > class、伪类、属性选择器 > 元素、伪元素

计算规则

选择器的特殊性值表述为4个部分,用0,0,0,0表示。

  • ID选择器的特殊性值,加0,1,0,0。
  • 类选择器、属性选择器或伪类,加0,0,1,0。
  • 元素和伪元素,加0,0,0,1。
  • 通配选择器*,等其他选择器对特殊性没有贡献,即0,0,0,0。
  • 行间样式的特殊性是1,0,0,0。

累加完成后,从左至右对比数值大小,有一项胜出则优先级高。

样式解析顺序

css样式是从右向左解析的。

提高性能的方式:

  1. 最右侧的使用类名,解析时遍历范围会比较少。
    .box div -->改成  .box .outer
    
  2. 使用子选择器,加快解析速度。
    .box .outer -->改成  .box > .outer
    
  3. 避免样式嵌套过深。

注: 实际css性能不会有太大问题,了解下可以使我们更好的使用css。

其他相关问题点

a标签伪类

a标签伪类的书写顺序是 :link、:visited、:focus、:hover、:active。
规则记忆:遵守爱恨原则LVHA(LoVe HAte)书写顺序,focus在中间的方式。

优先级相等,覆盖规则

样式优先级一致时,只与样式的解析顺序有关,与使用样式的顺序无关,demo:

<style>
.yellow {
    color: yellow;
}
.blue {
    color: blue;
}
</style>

<body>
    <span class="yellow blue">我是蓝色的</span><br />
    <span class="blue yellow">我也是蓝色的</span>
</body>

以上因为blue样式晚于yellow样式解析,所以其优先级更高。

如何覆盖内联样式中的 important 样式

document.getElementById('box').style.backgroundColor = 'red !important';

Copyright & copy https://www.zhuyuntao.cn 2019 all right reserved,powered by Gitbook该文件修订时间: 2019-11-03 12:36:28

results matching ""

    No results matching ""