CSS 选择器有哪些？优先级排列顺序

CSS选择器用于选择HTML文档中的元素，并为其应用样式。

以下是常见的CSS选择器：

1. 元素选择器（Element selector）：通过元素名称选择元素，例如 p 选择所有 <p> 元素。

2. 类选择器（Class selector）：通过类名选择元素，以.开头，例如 .my-class 选择具有 class="my-class" 的元素。

3. ID选择器（ID selector）：通过元素的唯一ID选择元素，以#开头，例如 #my-id 选择具有 id="my-id" 的元素。

4. 属性选择器（Attribute selector）：通过元素的属性选择元素，例如 [type="text"] 选择具有 type="text" 的元素。

5. 后代选择器（Descendant selector）：通过元素的后代关系选择元素，使用空格分隔，例如 div p 选择 <div> 元素内的所有 <p> 元素。

6. 子选择器（Child selector）：通过元素的直接子元素关系选择元素，使用 > 分隔，例如 ul > li 选择 <ul> 元素下的直接子元素 <li>。

7. 相邻兄弟选择器（Adjacent sibling selector）：选择与指定元素相邻的同级兄弟元素，使用 + 分隔，例如 h2 + p 选择 <h2> 元素后紧邻的 <p> 元素。

8. 通用选择器（Universal selector）：选择所有元素，使用 * 表示。

CSS选择器的优先级排列顺序如下（从高到低）：

1. !important：具有最高优先级，通过在样式声明中使用 !important 关键字。

2. 内联样式（Inline style）：通过在元素的 style 属性中直接定义样式。

3. ID选择器（ID selector）：通过元素的唯一ID选择元素。

4. 类选择器（Class selector）、属性选择器（Attribute selector）和伪类选择器（Pseudo-class selector）：通过类名、属性名或伪类选择元素。

5. 元素选择器（Element selector）和伪元素选择器（Pseudo-element selector）：通过元素名称或伪元素选择元素。

6. 通配选择器（Universal selector）和子选择器（Child selector）：通配选择器选择所有元素，子选择器选择特定元素的直接子元素。

当多个规则具有相同的优先级时，后面出现的规则将覆盖前面的规则。如果多个规则具有不同的优先级，具有较高优先级的规则将被应用。

需要注意的是，滥用 !important 可能会导致样式的维护和扩展困难，应谨慎使用。