CSS选择器优先级

CSS选择器优先级

CSS选择器用于选择HTML元素，并将样式应用于这些元素。选择器根据优先级来确定应用哪些样式，下面按优先级从高到低的顺序整理和归纳常见的CSS选择器。

1. ID选择器（最高优先级）

ID选择器使用HTML元素的id属性来选择特定的元素。

#myElement {
    /* CSS样式 */
}

2. 类选择器

类选择器使用HTML元素的class属性来选择元素。

.myClass {
    /* CSS样式 */
}

3. 标签选择器

标签选择器使用HTML标签名称来选择所有具有该标签名称的元素。

p {
    /* CSS样式 */
}

4. 伪类选择器

伪类选择器用于选择元素的特殊状态或位置，以冒号（:）开头。

a:hover {
    /* 鼠标悬停时的样式 */
}

5. 伪元素选择器

伪元素选择器用于选择元素的特定部分，以双冒号（::）开头。

p::first-line {
    /* 选择段落的第一行 */
}

6. 子元素选择器

子元素选择器选择元素的直接子元素。

ul > li {
    /* 选择ul元素下的直接子元素li */
}

7. 后代选择器

后代选择器选择元素的后代元素。

div p {
    /* 选择div元素下所有p元素 */
}

8. 相邻兄弟选择器

相邻兄弟选择器选择元素的相邻兄弟元素。

h2 + p {
    /* 选择h2元素的下一个p元素 */
}

9. 通用选择器

通用选择器选择所有元素。

* {
    /* 选择所有元素 */
}

10. 属性选择器

属性选择器根据元素的属性来选择元素。

input[type="text"] {
    /* 选择所有type属性为text的input元素 */
}

11. 交集选择器

交集选择器由两个选择器构成，用于选择同时满足标签和class条件的元素。

p.one {
    /* 选择同时具有p标签和one类的元素 */
}

12. 并集选择器

并集选择器将多个选择器连接在一起，用于同时选择多个元素，并为它们定义相同的CSS样式。

p, span, div {
    /* 选择p、span和div元素，并为它们定义相同的样式 */
}

请注意，选择器的优先级是根据选择器的具体规则和出现的顺序来确定的，一般情况下，优先级越高的样式会覆盖优先级较低的样式。