阅读 134

关于CSS权重的一些详解

这是我参与8月更文挑战的第10天,活动详情查看:8月更文挑战

关于CSS中的权重

在我们日常的学习中,有没有仔细的想过css的样式规则是什么样子的呢,为什么我写了这个样式不会显示在网页上,这个就和权重有关,那么什么是权重呢?

css权重指的是css6大基础选择符的优先级,优先级高的css样式会覆盖优先级底的css样式,优先级越高说明权重越高,反之亦然。

一般在我们的认知中 !important 的权重是最大的, id选择器的权重是大于类选择器的

优先级

浏览器通过优先级来判断哪些属性值与一个元素最为相关,从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

那优先级是什么呢?

优先级就是分配给指定的 CSS 声明的一个权重,它由 匹配的选择器中的每一种选择器类型的 数值决定

如果两个声明的优先级是一样的时候,最后面的那个才会被直接应用到元素上

当同一个元素有多个声明的时候,优先级才会有意义

也就是说具体用哪个样式还是得看你的数值的大小,一般的情况下的比较是这样子的:

!important > 内联样式(style="") > ID选择器(.box) > 类选择器(#box) > 标签选择器(h1) | 伪类(:hover) | 属性选择器[type="radio"] > 伪对象 > 继承 > 通配符(*)

通配选择符([*])关系选择符([+], [>], [~], ['``'], [||])和 否定伪类(negation pseudo-class)([:not()])对优先级没有影响。(但是,在 :not() 内部声明的选择器会影响优先级)。

根据 W3 标准中的规定, css selector 分为 4 种 type: a, b, c, d

  • a: 如果 css 属性声明是写在 style="" 中的, 则数目为 1, 否则为 0
  • b: id 选择器的数目
  • c: class 选择器, 属性选择器(如 type='text'), 伪类选择器(如: ::hover) 的数目
  • d: 标签名(如: p, div), 伪类 (如: :before)的数目

在比较不同 css selector 的权重时, 按照 a - b - c - d 的顺序进行比较.

给元素添加的内联样式 (例如,style="font-weight:bold") 总会覆盖外部样式表的任何样式 ,因此可看作是具有最高的优先级。(那么!important呢)

!important 例外规则

当在一个样式声明中使用一个 !important 规则时,此声明将覆盖任何其他声明。虽然,从技术上讲,!important 与优先级无关,但它与最终的结果直接相关。使用 !important 是一个坏习惯,应该尽量避免,因为这破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时,拥有更大优先级的声明将会被采用。

一些经验法则:

  • 一定要优先考虑使用样式规则的优先级来解决问题而不是 !important
  • 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
  • 永远不要在你的插件中使用 !important
  • 永远不要在全站范围的 CSS 代码中使用 !important

注意点

image.png 其实这样子理解是很容易被误导的 ,按照这样子说的话,那么10个类选择器 == 1个id选择器

因为10个类选择器的值是10 * 10 = 100

那么让我们演示一下

 <div id='testId' class="testClass"></div>
复制代码
 #testId {
     background-color: red
 }
 ​
 .testClass.testClass.testClass.testClass.testClass.testClass.testClass.testClass.testClass.testClass {
     background-color: pink
 }
复制代码

结果却还是红色的,也就是说上面的那个加法是不成立的

image.png

这个是我在外国网站找到的一个解释图片

image.png

其实这里面每一位数是256位的,而不是二进制的

也就是说类选择器的 0-1-0 和 id选择器的 1-0-0 要相等的话

需要256个类选择器才可以和一个id选择器的权重一样高

\

文章分类
前端
文章标签