2021-05-27

 Css 选择器权重

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术： DW CSS

撰写时间：2021/5/26

在前端开发中，我们经常要利用css选择器给元素添加样式，css选择器的权重就成为我们必须了解的知识了，我总结了css选择器权重的知识点，在这里分享给大家。

      按照官方的说法，css权重的大小如下：

！important>行间样式>id选择器>class选择器 属性选择器>标签选择器>通配符。

内联样式的权重为： 1000

ID选择符的权重为： 0100

类（class）选择符的权重为： 0010

属性选择符的权重为： 0010

类型选择符的权重为： 0001

继承样式的权重为： 0000

通配符选择器： 000

计算css权重的时候，一般来说只会叠加，不会进位。
根据 W3 标准中的规定, css selector 分为 4 种 type: a, b, c, d. 他们的数目计算规则为:

1，a: 如果 css 属性声明是写在 style=“” 中的, 则数目为 1, 否则为 0

2，b: id 选择器的数目

3，c: class 选择器, 属性选择器(如 type=“text”), 伪类选择器(如: ::hover) 的数目

4，d: 标签名(如: p, div), 伪类 (如: :before)的数目

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

由第一个 selector type a 的计算规则可知: 写在 html 代码 style 属性中的 css 相较写在 css 选择器中的 css 属性具有最高的优先级.

而 id selector (b) 相较 class selector (c) 有更高的优先级

假如我们实际使用时a,b,c,d算完都一样，那么就按放置顺序来确定执行哪一个，前面的会被后面的所覆盖。
回到前文的例子，li选择器的权重没有ul li这种复合选择器高，所以li选择器就没有执行。

这是我总结的css权重的知识点，我要分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！