第七题：描述 CSS 的权重计算规则

[Ray-56]

描述 CSS 的权重计算规则

<div class="red blue">啥颜色</div>
<div class="blue red">啥颜色</div>

.red { color: red; }
.blue { color: blue; }

两个 div 内容的颜色是什么？

[MMmaXingXing]

1、初始工作

想要了解CSS的权重计算规则,首先需要先清楚两个概念。 （1）、权重： 权重是一个相对的概念，是针对某一指标而言的。某一指标的权重是指该指标在整体评价中的相对重要的程度。 （2）、权重系数，是表示某一项指标在指标项系统中的重要程度，它表示在其他指标不变的情况下，这一项指标的变化，对结果的影响。

2、CSS权重值系统

一般情况下，我们这么模拟CSS的权重值
    * <span>等标签、::before伪元素等选择器 权重为 1；
    * .class类、:hover伪类、a[id='123']属性选择器 等选择器权重为10；
    * #id等id选择器，权重为100
    * <span style="width:100px;"></span>等行内样式，权重为1000
    * ！important 权重高于行内样式
    * 另外，通用选择器*、相邻选择器+、子选择器>、等选择器不在以上等级内 权重为0

3、比较规则规则

权值 = 第一等级选择器*个数，第二等级选择器*个数，第三等级选择器*个数，第四等级选择器*个数；  
但是，低等级的选择器，个数再多也不会越级超过高等级选择器的优先级。  
即：
* 先从高等级的进行比较，高等级的同时，再比较低等级的。
* 完全相同，后者优先，也就是样式覆盖。
*css后面加！important，无条件绝对优先。

4、题目答案

两个div内容的颜色都是蓝色。

[GenXiaoLe]

1. css参与权重计算的内容：
   • 样式类型：行间（行内） 样式，内联（内部）样式，（外联）外部样式。
   • 选择器的类型：id,class,标签，*，属性，伪类，伪元素，子类选择器、相邻选择器。
2. 权重计算规则：
   • 最高优先级：无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。
   • 第一等：内联样式，如：style="color:red;"，权值为1000。
   • 第二等：ID选择器，如：#header，权值为0100。
   • 第三等：类选择器、如：.header， 权值为0010。
   • 第四等：类型（标签）选择器和伪元素选择器，如：:after 权值为0001。
   • 通配符，子选择器，相邻选择器等。如*，>,+, 权值为0000。
3. 权重比较规则：
   • 一般而言，选择器越特殊，它的优先级越高，也就是选择器指向的越准确，它的优先级就越高。并且是从左往右逐个等级比较，前一等级相等才往后比，权重从左往右依次相加。比如：.example span {color:red;}的选择器优先级是 10 + 1 也就是11；而 .example .example_span{color:blue;} 的优先级是10 + 10 也就是20；
   • 但是如果完全相同，后者优先，也就是样式覆盖。比如：.example_blue{color:blue} .example_red{color:red}。<div class="example_blue example_red"></div>与<div class="example_red example_blue"></div>结果都为红色，如果两个样式先后互换，则均为蓝色。
4. 问题答案： 从权重比较规则可以看出，上面的题目，属于二者权重完全相同，这时候后者渲染优先，即均为蓝色。