标签.类名的权重是多少？

stackfing 发布于2019-08-29 16:24 / 2571人阅读

摘要：在我指出标签名权重是后，他也觉得自己说错了。类名标签，可以解释为标签中有此类名的元素。

博客为何而来：今天遇到一个问题：标签.类名的权重是多少？这个我也不是很清楚，本来想走捷径：问问别人，百度一下啊……问了一个同学，他开口直接说是20；我问为毛是20，他说标签名10,类名是10，共计20。在我指出标签名权重是1后，他也觉得自己说错了。我百度了一下，也没有得到什么结果。觉得自己的验证过程可以写篇小博客，然后此刻也不是很慢，那我就不拖拉，就是干咯。

类名.标签，可以解释为：标签中有此类名的元素。

大家都知道：

id选择器的权重加0,1,0,0；

类选择器、属性选择器或伪类的权重加0,0,1,0；

元素和伪元素的权重加0,0,0,1；

通配选择器*对权重没有贡献，即0,0,0,0；

最后比较特殊的一个标志!important，它的优先级是最高的，为了方便记忆，可以认为它的权重为1,0,0,0,0；

权重越高，样式被应用的优先级也就越高，约难被其他样式覆盖；

话不多说，计算权重代码如下：

    
    
    
        
        
        
        标签.类名的权重是多少？
        
    
    
        
            标签.类名的权重是多少?

我计算的方法：通过比较已知的类名权重和层叠样式表中权重相同的样式，后面的样式会覆盖前面的样式的样式，来计算出标签.类名的权重。放到代码中具体实现是：通过定义样式，来改变p标签的文本颜色，查看浏览器渲染结果，来得出权重值；

为了高效计算这个值，我们直接在浏览器中调试样式了。
首先，直接执行上面代码，结果截图如下：

分析：我们知道，类名的权重是10，两个类名叠加权重值为20；而且这个样式位置在最顶部，添加在同一个标签上的其他样式都没有生效，所以其他的样式权重都小于20；
其次，直接在浏览器中取消已经生效的样式，看看浏览器会渲染哪个样式，渲染哪个，第二个权重高的样式可能就是哪个啦，结果截图如下：

分析：难道这个权重是第二高的吗？我们知道，同权重的样式，层叠样式表中越靠后的会覆盖前面的，上面代码中标签.类名这个样式是写在最后，我们可以先换换样式的位置，再下定论；
接下来，换位置，再执行：
代码如下：







标签.类名的权重是多少？



    
        标签.类名的权重是多少?

注意：这里的标签.类名的样式已经被提到第二的位置了，并且通过前面的操作，我们已经知道标签.类名的权重小于20，所以我们这里直接把双类名的权重给注释掉；

重新执行代码，运行结果截图如下：

分析：更换位置之后的结果和上面的结果不符，所以这里是因为靠下的样式会覆盖同权重的样式的缘故。这里也可以得出，（类名标签）的权重和（标签.类名）的权重一样，也就是11；

小结：标签.类名的权重是11。

好啦，博客随着有了结果，也就写完了，趁着下午天气不是很热，砖不烫手，赶紧去搬砖了。

GPU云服务器云服务器 java中的类名是啥 html标签权重 html标签的颜色是的服务器多少钱 [标签:标题]

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113718.html

标签.类名的权重是多少？

摘要：在我指出标签名权重是后，他也觉得自己说错了。类名标签，可以解释为标签中有此类名的元素。博客为何而来：今天遇到一个问题：标签.类名的权重是多少？这个我也不是很清楚，本来想走捷径：问问别人，百度一下啊……问了一个同学，他开口直接说是20；我问为毛是20，他说标签名10,类名是10，共计20。在我指出标签名权重是1后，他也觉得自己说错了。我百度了一下，也没有得到什么结果。觉得自己的验证过程...

wmui 2019-08-02 11:15 评论0 收藏0
课时88.权重问题（掌握）

摘要：什么是优先级的权重作用当多个选择器混合在以前使用时，我们可以通过计算权重来判断谁的优先级最高。1.什么是优先级的权重？作用：当多个选择器混合在以前使用时，我们可以通过计算权重来判断谁的优先级最高。三个选择器都是直接选中p标签 2.权重问题的计算规则 2.1首先先计算选择器中有多少个id，id多的选择器优先级最高 2.2如果id的个数一样，那么再看类名的个数，类名个数多的优先级最高 ....

cucumber 2019-04-23 13:37 评论0 收藏0
什么是 CSS？

摘要：的第二章，什么是释义，层叠样式表也算是一种标记语言，其内容作为浏览器的输入，浏览器会解析其文本内容，作为附加的样式信息，用以修饰标签。年，提出层叠样式表，的雏形出现。属性的继承开篇我们就提到了，为层叠样式表，层叠代表的意思为属性的继承。前言作为程序员，技术的落实与巩固是必要的，因此想到写个系列，名为 why what or how 每篇文章试图解释清楚一个问题。 why what ...

hankkin 2019-08-30 11:26 评论0 收藏0
css基础（待补充）

摘要：选择器基础选择器标签选择器针对一类标签注意选择的所有，而不是一个。元素元素是文档结构的基础。行内元素不会在它本身之前或之后生成分隔符，所以可以出现在另一个元素内容中，而不会破坏其显示。 css选择器基础选择器 1.标签选择器：针对一类标签注意：选择的所有，而不是一个。 p{ font-size:14px; } css 2.ID选择器：针对某一个特定的标签使用，只能使...

浠ラ箍 2019-08-30 15:44 评论0 收藏0
【零基础入门】 css学习笔记（3）选择器与层叠性

摘要：，高级选择器后代选择器空格表示后代选择器就是的后代所有的。注意是后代，并不一定是儿子空格可以出现多次补充后代选择器中出现的东西很灵活，可以是标签，可以是名，可以是名后代选择器，就是一种平衡共性特性的平衡。一，选择器 1，基础选择器 1）标签选择器：div{ } ，选择的所有，而不是一个，用来描述共性。 2）类选择器：.class名{ } 多个元素可以同时属...

cppprimer 2019-08-29 15:43 评论0 收藏0