css权重与常见布局（1）

2024年4月5日 160次阅读 来源: ZhengMaster2020

CSS的选择器类型与权重值

  1. 通配符选择器 权重值为 0
  2. 元素选择器，和伪元素(例如::before) 权重值为 1
  3. 类选择器(class)，属性选择器，伪类(:hover) 权重值为 10
  4. ID选择器 权重值为 100
  5. 行内样式 权重值为 1000
  6. ！important 权重值比前5个都大，可以说无穷大

tips:

  • ！important的权重最大，但是它可以被权重更大的！important所覆盖
  • 行内样式 总会覆盖外部样式表的任何样式(除了!important)
  • 几种权重值不同的选择器作用在同一个元素上，以权重值大的css样式规则生效
  • 几种权重值相同的选择器作用在同一个元素上，以后面出现的选择器的css样式规则生效
  • 无论使用多少个权重低的选择器够比不过一个权重值高的选择

如果有!important那么相加的那些无论多权重高就不管用，如果有max-height/max-width那么!important不管用，如果同时有min-height/min-width和 max-height/max-width，那么max-height/max-width的不管用

口诀：从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1

min-height/min-width > max-height/max-width > !important > 行内样式 > ID选择器 > 类选择器、属性选择器、伪元素和伪类选择器 > 元素选择器 > 通用选择器

权重的计算方法

div p h3 —> 0,0,0,3 所以此时h3标签的权重值为3， 因为div,p,h3这些都是标签选择器（权重值为1）

<div>
    <p>
        <h3>xxxx</h3>
    </P>
</div>

#par .sub h3 —> 0,1,1,1 此时的h3标签的权重值为111=100+10+1 (依次类推)

<div id="par">
    <p class="sub"> 
        <h3>xxxx</h3>
    </P>
</div>

要注意的一点就是如前面说到的那样，数位没有进位： 0,0,0,5 + 0,0,0,5 = 0,0,0,10而不是0,0,1,0，所以不会存在10个div能赶上一个类选择器的情况。

实战例题(某厂前端工程师笔试题)

基于以下的HTML结构和CSS样式，文本Dijkstra的颜色是？

<ul class="authors" id="favorite">
    <li><span>Martin Fowler</span></li>
    <li id="related><span class="highlight">Dijkstra</span></li>
</ul> 

ul #related span {
    color:red;
}
#favorite .highlight{
     color:orange;
}
.highlight{
    color:black;
}

计算权重：
（1）ul #related span —> 0,0,0,1 + 0,1,0,0 + 0,0,0,1 =0,1,0,2 —> 102 red
(2) #favorite .highlight —> 0,1,0,0 + 0,0,1,0 = 0,1,1,0 —> 110 orange (权重最大)
(3) .highlight —> 0,0,1,0 = 10 black

因为110 > 102 > 10 所以文本Dijkstra显示的 Orange这种颜色

    原文作者：ZhengMaster2020
    原文地址: https://segmentfault.com/a/1190000019378408
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞