css选择器的权重值

在CSS中，选择器的权重值决定了哪个样式规则会被应用到特定的HTML元素，当多个选择器应用到同一个元素时，权重值更高的选择器将覆盖权重值较低的选择器。

内联样式

内联样式是直接在HTML元素的style属性中定义的样式，内联样式的权重值最高，因为它直接应用于元素，无需任何选择器。

<p style="color: red;">这是一个红色的段落。</p>

ID选择器

ID选择器以#开头，用于选择具有特定ID的元素，ID选择器的权重值为1000。

#myId {
    color: blue;
}

类选择器、属性选择器和伪类选择器

类选择器以.开头，用于选择具有特定类的元素，属性选择器以[开头，用于选择具有特定属性的元素，伪类选择器如:hover、:active等，用于选择处于特定状态的元素，这些选择器的权重值为100。

.myClass {
    color: green;
}
[datacustom] {
    color: orange;
}
a:hover {
    color: purple;
}

类型选择器和伪元素选择器

类型选择器（也称为元素选择器）用于选择特定类型的元素，伪元素选择器如::before、::after等，用于选择元素的特定部分，这些选择器的权重值为1。

p {
    color: black;
}
::before {
    content: "插入内容";
}

通用选择器（*）和相邻兄弟选择器（+）

通用选择器（*）用于选择所有元素，相邻兄弟选择器（+）用于选择紧跟在某个元素后面的兄弟元素，这些选择器的权重值为0。

{
    color: gray;
}
h1 + p {
    color: brown;
}

组合选择器

当多个选择器通过逗号分隔时，它们的权重值相加，一个类选择器和一个ID选择器组合在一起，总权重值为1000 + 100 = 1100。

#myId.myClass {
    color: pink;
}

!important 声明

使用!important声明可以提高样式规则的权重值，这在覆盖其他样式或浏览器默认样式时非常有用，过多地使用!important可能导致样式难以维护。

.myClass {
    color: red !important;
}

相关问答FAQs

Q1: 如果有两个相同权重值的选择器应用到同一个元素，会发生什么？

A1: 如果两个相同权重值的选择器应用到同一个元素，那么后定义的样式规则将覆盖先定义的样式规则，这是因为CSS样式是按照它们在样式表中的顺序应用的。

Q2: 如何提高某个选择器的权重值，但不使用!important声明？

A2: 可以通过增加选择器中的元素、类、ID等来提高权重值，可以将类选择器更改为类型选择器和类选择器的组合，从而将权重值从100提高到101。