关于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

注意点

其实这样子理解是很容易被误导的，按照这样子说的话，那么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
 }
复制代码

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