css 权重

 css  权重  

css	权重
!important	Infinity　[无穷大]
行间样式	1000
id	100
class | 属性 | 伪类	10
通配符	0

 

 

 

 

 

 

 

 

【2022年03 月 补充：】

虽然如此说  css 的权重等于多少，但是这只是一个 便于记忆的值，并不是说真的等于 这么多，

比如有个这样的题目：

.d1.d2.d3.d4....dn{ color: red }   // n> 100

.d1.d2.d3.d4 { color: yellow }

#id { color:blue }

<div class="d1 d2 d3 d4 ... dn" id="id">xxx</div>

此时该节点的文本节点显示什么颜色？

此处不得不多的是 权重 和优先级。

1、如果 同一个元素中，存在多个选择器，此时先按照优先级 来展示 。优先级如下： !important > 行内样式 >  id > class > div

2、如果同一个元素中，没有优先级区分，都是同一个优先级的选择器，会按照权重来显示样式。如果权重一样，就按照“就近原则”来展示。