CSS 选择器以及优先级
1. id选择器
2. class选择器 | 类选择器
3. 元素选择器
4. 通用选择器
5. 属性选择器
link1
link2
link3
link4
link5
link6
link7
6. 选择器列表
1
7. 后代选择器
- idx
- idx
- idx
8. 一般兄弟选择器
This is not red.
Here is a paragraph.
Here is some code.
And here is a span.
8. 相邻兄弟选择器
- One
- Two!
- Three
9. 伪类
hover
css 优先级
选择器的优先级由四个部分相加
- 千位： 如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。
- 百位： 选择器中包含ID选择器则该位得一分。
- 十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。
- 个位：选择器中包含元素、伪元素选择器则该位得一分。
| 选择器 | 千位 | 百位 | 十位 | 个位 | 优先级 |
|---|---|---|---|---|---|
h1 |
0 | 0 | 0 | 1 | 0001 |
h1 + p::first-letter |
0 | 0 | 0 | 3 | 0003 |
li > a[href*="en-US"] > .inline-warning |
0 | 0 | 2 | 2 | 0022 |
#identifier |
0 | 1 | 0 | 0 | 0100 |
| 内联样式 | 1 | 0 | 0 | 0 | 1000 |
比较时，按照首位开始比较谁大，比如千位为1，那么优先级最高，如果千位为0，那么看百位，有id就加一，谁大谁优先级高
1000 > 0100 > 0010 > 0001 > 0000
1000 > 0200 > 0030 > 0009 > 0000
*优先级最低 为 0000
如果使用vscode，在定义style时，可以鼠标划入类，会显示优先级，如下图：