CSS经典权重5道题解析

在前端的道路学习过程，CSS的选择器的权重的问题知识点是不可避免的。

下面先简单回顾一下三种常用的选择器，id选择器、class选择器、元素选择器（type）。一般为了分方便区分三种选择器的权重，分别以1.0.0、0.1.0、0.0.1来对比这种谁的大小。

之后CSS样式中只需要比谁权重数组大就执行谁，可是真的是只需要比权重大小就可以了吗？还是说只是在某种情况下才适合比权重？不要着急，相信通过后面的5道题讲解。你会对CSS权重有一个更深的了解。

第一道题：

看到这一题，想必大家都没有问题。第一个样式权重为1.1.1，第二个样式权重为1.0.3，第三个样式权重为0.3.4。

所以此题最后的答案，p为红色的文字。没错，文字的颜色就是红色。

第二题：

看到这一题之后，按照第一题的逻辑。第一个样式权重0.2.2 第二个样式权重1.0.0.

所以这一题的文字颜色应该是蓝色。

可是最后实际的结果：文字的颜色为red红色。

可能这里有同学会抓狂，为什么比权重的大小一个行的通，一个行不通呢？

让我们重新看看这两个代码

通过代码和相关注释，相信对于权重的理解又加深一点了吧。乘热打铁，让我们马上进入下一题代码。

 

第三题：

这一题对比第二种情况更加复杂了，有选中和没有选中两种情况。那么到底是执行那一种规则呢？相信有许多人犯迷糊，不知道如何选择了。那么我也不绕弯子，答案：文字最终的颜色为绿色。

具体原因，请看下面的图文介绍：

第四题：

 

这里两个样式都有选中元素，同时权重的等级大小也相同。那么文字的颜色到底听谁的呢？

最后结果显示，文字颜色为绿色。因为在权重一样的情况下，谁的样式排在后面听谁的。

第五题

这里的代码太长了，我就不一一全部截图下来了。但是通过图片可以大概看出来结构层，这个文字放在12个div当中。那么本题就考验的超过10个标签权重是否能够比一个类名权重更大。

结果：文字的颜色为绿色。

说明了，1.0.0、0.1.0、0.0.1之间关系并不是像平常数学中的10进制一样，逢10进一。他们之间的进制相差等级很大，至于相差多少。没有进一步深入去测试研究，因为几乎没有谁在实际开发过程当中，嵌套10个以上的标签。那样的网页会臃肿不堪，不利于维护。所以这个仅仅作为一个参考知识点！有兴趣的可以测试一下，目前就我所知道有人测试了255个类能够大于一个id选择器，当然仅仅是在ie浏览器情况下测试成功。

最后让我们对这5道题进行一个总结：

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

2、  如果没有直接被选中，那么就按照就近原则的方式执行。

好了，以上就是CSS经典权重5道题解析了。如有写的不合理的地方，欢迎多多指出。