css的选择器有哪些？权重由大到小是怎么排序的？

常见的 CSS 选择器有：

1. ID 选择器 (#id):

   • 选择具有特定 ID 属性的单个元素。权重最高。
   • 例子：#header { color: blue; }
   • 权重：100

2. 类选择器 (.class):

   • 选择具有指定类名的元素。多个类选择器的权重会加和。
   • 例子：.menu { font-size: 14px; }
   • 权重：10

3. 属性选择器 ([attribute], [attribute=value]):

   • 选择具有特定属性或属性值的元素。
   • 例子：[type="text"] { border: 1px solid black; }
   • 权重：10

4. 伪类选择器 (:hover, :first-child):

   • 选择符合特定状态或条件的元素。
   • 例子：a:hover { color: red; }
   • 权重：10

5. 元素选择器 (element):

   • 选择指定类型的所有元素。
   • 例子：p { margin: 0; }
   • 权重：1

6. 伪元素选择器 (::before, ::after):

   • 选择元素的虚拟部分。
   • 例子：p::before { content: "Note: "; }
   • 权重：1

7. 通配符选择器 (*):

   • 选择所有元素，权重最低。
   • 例子：* { box-sizing: border-box; }
   • 权重：0

权重排序（由大到小）：

1. ID 选择器 (#id): 权重 100
2. 类选择器 (.class)、属性选择器 ([attribute])、伪类选择器 (:hover): 权重 10
3. 元素选择器 (element)、伪元素选择器 (::before, ::after): 权重 1
4. 通配符选择器 (*): 权重 0

组合选择器（如 div.class, #id .class）的权重是其组成部分的权重之和。例如，#id .class 的权重为 100 + 10 = 110。