权重

CSS

直观理解:

1. 可能范围越小, 权重越高
2. 通过复合选择器把若干个选择器组合之后, 选择范围必定变小, 所以权重肯定升高
   1. 但最高权位依然起决定作用

不同选择器的权重:

1. 从高到低:

1. [base::行内样式] (style="")
   1. 用权位表示: 1, 0, 0, 0
2. ID选择器
   1. 用权位表示: 0, 1, 0, 0
3. 类选择器, 伪类选择器
   1. 用权位表示: 0, 0, 1, 0
4. 元素选择器
   1. 用权位表示: 0, 0, 0, 1
5. 继承 或者 *通配符
   1. 用权位表示: 0, 0, 0, 0

1.1. 说明:

1. 权位越左边, 权重越高
2. 同权位的权重可以累加, 但不会发生进位

2. 权重的叠加(累加):

2.1. 举例说明:

1. div ul li ⇒ 0, 0, 0, 3
2. .nav ul li ⇒0, 0, 1, 2
3. a:hover ⇒ 0, 0, 1, 1
4. .nav a ⇒ 0, 0, 1, 1

实际应用

1. 人为提升优先级

目标是选择link类的标签：

• .link 权重为0，0，1，0
• .link.link.link 权重为0，0，3，0

2. 效率提升

• 在vscode中把鼠标悬浮在选择器上，可以查看该选择器的权重