css权重与常见布局（1）

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这种颜色