CSS选择器优先级的正确计算方式介绍

CSS选择器优先级的计算（计算选择器的特异性） 1.css选择器的优先级简单的权重相加吗？显然不是我们可以看到或听到很多人对于css选择器优先级的计算都是使用了所谓的权重相加，行间样式...

CSS选择器优先级的计算（计算选择器的特异性）

1.css选择器的优先级简单的权重相加吗？

显然不是

我们可以看到或听到很多人对于css选择器优先级的计算都是使用了所谓的权重相加，行间样式权重为1000？，id选择器权重为100？，class/属性/伪类选择器权重为10？，标签/伪元素选择器权重为1？，通配符为0？，然后把所有的权重相加，权重更大的优先级更高，权重相等的，后面的覆盖前面的样式，尽管从表面看没有什么问题，但这种计算优先级的方式显然是错误的。

2.怎样正确计算css选择器的优先级？

w3c官网：第16条，计算选择器的特异性

对于给定元素，选择器的特异性计算如下：

计算选择器中ID选择器的数量（= A）
计算选择器中的类选择器，属性选择器和伪类的数量（= B）
计算类型选择器和选择器中的伪元素的数量（= C）
忽略通用选择器

最终的特异性用 (A,B,C) 表示

如果选择器是选择器列表，则为列表中的每个选择器计算此数字。

对于针对列表的给定匹配过程，有效的特异性是列表中最匹配的选择器的特异性。

通过按顺序比较这三个组成部分来比较特异性：A值越大的特异性越具体；如果两个A值绑定在一起==(两个A值相同)，则B值越大的特异性越具体。如果两个B值也绑定在一起（两个B值相同），则C值越大的特异性越具体。如果所有值都绑定在一起（A,B,C值都相同）==，则两个特异性相等。

谁的特异性大，就会应用谁的样式，如果特异性相同，则后面的样式会覆盖前面的。

由于存储限制，实现可能会限制A，B或C的大小。如果是这样，则必须将高于限制的值限制在该限制内，并且不要溢出。

例如：

#a .b{}        //A=1,  B=1, C=0
.a.b.c.d.e.f.g.h.i.j.k.l.m.n {}     //A=0,  B=14, C=0
//显然第一个的特异性更大，自然会应用第一个的样式

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群：805358732

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。

发表于 2021-07-13 10:35
阅读 ( 573 )
分类：WEB前端开发

CSS选择器优先级的正确计算方式介绍

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »