css权重

css权重

在CSS中，会根据选择器的特殊性来决定所定义的样式规则的次序，具有更特殊选择器的规则优先于具有一般选择器的规则，如果两个规则的特殊性相同，那么后定义的规则优先。

我们把CSS的特殊性分为4个等级，每个等级代表一类选择器。每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。

4个等级的定义如下：
- 第一等：代表内联样式，如: style=””，权值为1000。
- 第二等：代表ID选择器，如：#content，权值为100。
- 第三等：代表类，伪类和属性选择器，如.content，权值为10。
- 第四等：代表类型选择器和伪元素选择器，如div p，权值为1。

下面为一些计算示例：

通过计算权值大小即可得出样式应用的优先级！

注意：通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0。

CSS经典权重习题五道

1. 
   看到这一题，想必大家都没有问题。第一个样式权重为1.1.1，第二个样式权重为1.0.3，第三个样式权重为0.3.4。
   所以此题最后的答案，p为红色的文字。没错，文字的颜色就是红色。
2. 
   看到这一题之后，按照第一题的逻辑。第一个样式权重0.2.2 第二个样式权重1.0.0.
   所以这一题的文字颜色应该是蓝色。
   可是最后实际的结果：文字的颜色为red红色。
   可能这里有同学会抓狂，为什么比权重的大小一个行的通，一个行不通呢？
   让我们重新看看这两个代码
   
3. 
   这一题对比第二种情况更加复杂了，有选中和没有选中两种情况。那么到底是执行那一种规则呢？相信有许多人犯迷糊，不知道如何选择了。那么我也不绕弯子，答案：文字最终的颜色为绿色。
   具体原因，请看下面的图文介绍：
   
4. 
   这里两个样式都有选中元素，同时权重的等级大小也相同。那么文字的颜色到底听谁的呢？
   最后结果显示，文字颜色为绿色。因为在权重一样的情况下，谁的样式排在后面听谁的。
   
5. 

这里的代码太长了，就不一一全部截图下来了。但是通过图片可以大概看出来结构层，这个文字放在12个div当中。那么本题就考验的超过10个标签权重是否能够比一个类名权重更大。
结果：文字的颜色为绿色。
说明了，1.0.0、0.1.0、0.0.1之间关系并不是像平常数学中的10进制一样，逢10进一。他们之间的进制相差等级很大，至于相差多少。没有进一步深入去测试研究，因为几乎没有谁在实际开发过程当中，嵌套10个以上的标签。那样的网页会臃肿不堪，不利于维护。所以这个仅仅作为一个参考知识点！有兴趣的可以测试一下，目前就我所知道有人测试了255个类能够大于一个id选择器，当然仅仅是在ie浏览器情况下测试成功。

总结：

1、 在考虑浏览器执行哪一个样式之前，先看样式有没有直接被选中。如果直接选中了，按照id数、类数、标签数来计算权重，谁最后的权重数值听谁的。如果数值一样，则谁写在后面听谁的。
2、 如果没有直接被选中，那么就按照就近原则的方式执行。

PS:

css优先级如下：

通用选择器（*） < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 <内联样式

例外：

！important

!important允许开发人员强制应用某样式，他的用法是写在该样式的某属性值后，结束分号前，以便强制应用该样式，如：

<style>
    img { width: 150px !important;}
</style>

PS:撰写日期太久，参考学习的文章已经记不得出处，在此就不贴出了，有任何问题，可联系本人处理。