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;}