css选择器及其权重

在CSS中，选择器是用来选择HTML元素并应用样式规则的一种方式。每个选择器都有一个与之相关联的权重，用来确定当多个规则应用到同一个元素时，哪个规则会优先生效。权重是由选择器的类型和组合方式来决定的。下面是一些常见的CSS选择器及其权重，按照优先级从低到高排列：

1. 元素选择器（权重：1）：例如，p选择器会选择所有段落元素。

2. 类选择器（权重：10）：例如，.my-class选择器会选择所有带有class="my-class"属性的元素。

3. ID选择器（权重：100）：例如，#my-id选择器会选择具有id="my-id"属性的元素。

4. 伪类选择器（权重：10）：例如，:hover选择器会选择鼠标悬停在元素上的状态。

5. 属性选择器（权重：10）：例如，[type="text"]选择器会选择具有type="text"属性的元素。

6. 子元素选择器（权重：0）：例如，ul > li选择器会选择

   下的直接子元素
   • 。

   • 相邻兄弟选择器（权重：0）：例如，h2 + p选择器会选择与

     元素相邻的第一个

     元素。

   • 通用选择器（权重：0）：例如，*选择器会选择所有元素，但通常不会用于为元素应用样式。

选择器的权重是根据上述规则计算的，当多个选择器应用到同一个元素时，具有更高权重的规则会覆盖具有低权重的规则。如果权重相同，则后定义的规则会覆盖先定义的规则。

请注意，权重是非常重要的，因为它们可以帮助你理解为什么某些CSS规则不起作用或被覆盖。在编写复杂的样式表时，了解选择器的权重是非常有用的，可以帮助你更好地控制页面的外观和行为。