css的选择器有哪些？权重由大到小是怎么排序的？
常见的 CSS 选择器有：
-
ID 选择器 (
#id):- 选择具有特定 ID 属性的单个元素。权重最高。
- 例子：
#header { color: blue; } - 权重：100
-
类选择器 (
.class):- 选择具有指定类名的元素。多个类选择器的权重会加和。
- 例子：
.menu { font-size: 14px; } - 权重：10
-
属性选择器 (
[attribute],[attribute=value]):- 选择具有特定属性或属性值的元素。
- 例子：
[type="text"] { border: 1px solid black; } - 权重：10
-
伪类选择器 (
:hover,:first-child):- 选择符合特定状态或条件的元素。
- 例子：
a:hover { color: red; } - 权重：10
-
元素选择器 (
element):- 选择指定类型的所有元素。
- 例子：
p { margin: 0; } - 权重：1
-
伪元素选择器 (
::before,::after):- 选择元素的虚拟部分。
- 例子：
p::before { content: "Note: "; } - 权重：1
-
通配符选择器 (
*):- 选择所有元素，权重最低。
- 例子：
* { box-sizing: border-box; } - 权重：0
权重排序（由大到小）：
- ID 选择器 (
#id): 权重 100 - 类选择器 (
.class)、属性选择器 ([attribute])、伪类选择器 (:hover): 权重 10 - 元素选择器 (
element)、伪元素选择器 (::before,::after): 权重 1 - 通配符选择器 (
*): 权重 0
组合选择器（如 div.class, #id .class）的权重是其组成部分的权重之和。例如，#id .class 的权重为 100 + 10 = 110。