美文网首页Web前端之路
css经典权重5道题解析

css经典权重5道题解析

作者: 车大棒 | 来源:发表于2016-07-21 00:45 被阅读435次

    在前端的道路学习过程,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。

    所以此题最后的答案,文字的颜色就是红色。

    第一题很简单的基础知识,相信大部分人都应该没问题。所以第一题基本上是用来给各位增强信心的,那么后面的几题就没有那么简单了,到处埋着坑呢。

    第二题:

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

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

    最后实际的结果:文字的颜色为red红色。

    这里有同学会抓狂,为什么比权重的大小一个行的通,一个行不通呢?

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

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

    第三题:

    这一题对比第二种情况更加复杂了,有选中和没有选中两种情况。那么到底是执行那一种规则呢?相信有许多人犯迷糊,不知道如何选择了。那么我也不绕弯子,

    答案:文字最终的颜色为蓝色。

    具体原因,请看下面的图文介绍:

    第四题:

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

    最后结果显示,文字颜色为橙色。

    因为在权重一样且又直接选中元素的的情况下,谁的样式排在后面听谁的。

    第五题:

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

    结果:文字的颜色为蓝色。

    说明了,1.0.0、0.1.0、0.0.1之间关系并不是像平常数学中的10进制一样,逢10进一。他们之间的进制相差等级很大,至于相差多少。没有进一步深入去测试研究,因为几乎没有谁在实际开发过程当中,嵌套10个以上的标签。那样的网页会臃肿不堪,不利于维护。所以这个仅仅作为一个参考知识点!有兴趣的可以测试一下!

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

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

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

    这里还简单的画了一下关于解决权重问题的思维草图

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

    相关文章

      网友评论

        本文标题:css经典权重5道题解析

        本文链接:https://www.haomeiwen.com/subject/ikwdjttx.html