css权重与常见布局1

jiezi

5 年前

通配符选择器权重值为 0
元素选择器，和伪元素(例如::before) 权重值为 1
类选择器(class)，属性选择器，伪类(:hover) 权重值为 10
ID 选择器权重值为 100
行内样式权重值为 1000
！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 这种颜色

css权重与常见布局1

CSS 的选择器类型与权重值

权重的计算方法

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