前端面试题-CSS权重

一、选择器优先级
由每一种选择器类型的权重决定。
二、优先级计算
1.优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的 数值 决定。
2.当优先级与多个CSS声明中任意一个声明的优先级相等的时候，
CSS中最后的那个声明将会被应用到元素上。
3.当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的CSS规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。
三、优先级顺序
3.1 选择器权重值

3.2 从大到小
ID 选择器， 如 #id{}

类选择器， 如 .class{}

属性选择器， 如 a[href=“segmentfault.com”]{}

伪类选择器， 如 :hover{}

伪元素选择器， 如 ::before{}

标签选择器， 如 span{}

通配选择器， 如 *{}

CSS 优先规则3：优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

3.3注意
通配选择符（universal selector）(*), 关系选择符（combinators） (+, >, ~, ’ ') 和 否定伪类（negation pseudo-class）(:not()) 对优先级没有影响。（但是，在 :not() 内部声明的选择器是会影响优先级）。
四、特殊的 !important 规则
4.1 说明
当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明。虽然技术上 !important 与优先级无关，但 !important 却又与 CSS 优先级直接相关。

4.2 破坏级联规则
使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则 使得调试找 bug 变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。
转载：https://www.cnblogs.com/jlfw/p/11968221.html

5.CSS样式优先级之间的权重比较采用的是求和比大小的模式。
计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。
两个典型的实例：
实例1：

<style type="text/css">
    div{
        color:red !important;
    }        
</style>
...
<div style="color:blue">我是一行严肃的占位文字</div>

内嵌式的权重值为10000+1，下面的行内式的权重值为1000，所以文字的最终颜色为red。
实例2：

<style type="text/css">
    #content div.content_left p{
        color:red;    
    }
    #content .content_left p{
        color:blue;
    }
</style>
......
<div id="content">
    <div class="content_left">
        <p>我是一行严肃的占位文字</p>
    </div>
</div>

第一条样式的权重计算：100+1+10+1，结果为112；
第二条样式的权重计算：100+10+1，结果为111。
所以段落p的最终颜色为red。