在写CSS样式时，我们需要选择器来确定我们想要更改哪些元素的样式。然而，当多个选择器同时应用到一个元素上时，就需要了解CSS选择器的权重或特异性（specificity）。本文将深入讨论CSS选择器权重的定义及其如何影响我们编写的样式表。
什么是CSS选择器权重？
CSS选择器权重指的是一种规则，用于确定当多个选择器同时应用到同一个元素时，哪个选择器会优先生效。这种规则基于每个选择器的特定权重值来计算。
请注意，选择器权重是基于选择器组成的，而不是基于元素的数量。例如，使用ID和类选择器的组合比单独使用两个类选择器具有更高的权重。以下是选择器权重的列表：
- ID选择器具有最高的权重，为100
- 类、属性、伪类选择器的权重为10
- 元素选择器和伪元素选择器的权重为1
- 通配符选择器的权重为0
选择器权重是通过将每个选择器中的权重值相加来计算的。例如，#myDiv .myClass选择器由一个ID选择器和一个类选择器组成，其权重为100 + 10 = 110。如果我们再添加一个元素选择器，其权重则为100 + 10 + 1 = 111。
如何使用CSS选择器权重
在编写CSS样式表时，我们必须非常谨慎地使用选择器。如果我们使用了过于特定的选择器，就可能会导致我们的样式无法生效（因为其他具有更高权重的选择器已经覆盖了该元素的样式）。相反，如果我们使用过于宽泛的选择器，就可能会导致我们无法获得所需的样式。
以下是一些有用的技巧，可帮助您根据需要正确使用CSS选择器权重：
- 避免使用ID选择器 - 尽管ID选择器具有最高的权重值，但是使用太多ID选择器会使样式表变得难以维护。
- 使用类选择器和属性选择器 - 这些选择器比元素选择器更具特异性，并且通常比ID选择器更易于维护。
- 避免使用通配符选择器 - 通配符选择器的权重为0，它们无法覆盖其他具有更高特异性的选择器。
- 使用“层叠”的思想 - 如果您需要为某个元素应用多个样式，请考虑如何将选择器组合成更具特异性的形式。例如，如果您需要为表单中的输入框应用样式，则可以使用以下选择器：.form input[type="text"]。这个选择器比.form input更具特异性。
以下是一个带有权重的代码示例：
Hello, World!
#myDiv p.myClass {
color: red;
}
在这个示例中，我们使用了ID选择器和类选择器来创建一个具有权重的选择器。这个样式表会将“Hello, World!”文本变为红色，因为该元素的选择器具有较高的特异性。
结论
CSS选择器权重是一项重要的概念，它可以帮助我们编写出更加具体、易于维护的样式表。通过理解选择器权重的计算方式，我们可以更好地掌握CSS，并确保我们的样式表能正确使用。