Question

不知何故，后代选择器会覆盖我的.red_p class。我该如何避免？我不想为每个p元素设置一个类。

HTML：

<html>
  <head>
    <style>
      .red_p {
        color: red;
      }

      #main p {
        color: blue;
      }
    </style>
  </head>
  <body>    
    <div id="main">
      <p>This should be blue.</p>           
      <p class="red_p">This should be red, but is blue.</p>             
    </div>  
  </body>
</html>

Answer 1

增加蓝色的specificity。对于当前代码，#main p比.red_p更具体，因为它包含ID。

您可以在红色规则中添加ID，例如.red_p, #main .red_p，并在蓝色规则后移动（后面的格式覆盖之前的格式）或使用!important。

特异性的作用如下：

如果A是!important且B不是，则A比B. Halt更具体。
如果A有更多的id选择器，A比B. Halt更具体。
如果A是内联样式且B不是，则A比B. Halt更具体。
如果A有更多的类选择器加上伪类选择器加上属性选择器而不是B，则A比B. Halt更具体。
如果A的元素多于B，则A比B. Halt更具体。
如果A在B之后声明，则A比B. Halt更具体。

（通用选择器不影响特异性）

http://cssspecificity.com有很好的例子和图片。

Answer 2

在CSS中，有一些特殊性规则（quoted from MDN，并且添加了更清晰的示例）：

以下选择者列表是通过提高特异性来实现的：


通用选择器 - 例如：*

类型选择器 - 例如：p

类选择器 - 例如：.p_red

属性选择器 - 例如：[class="red"]

伪类 - 例如：:hover

ID选择器 - 例如：#main

内联样式 - HTML中的ex：style属性

因此，您可以为选择器添加特异性。在您的情况下，有几种方法可以做到这一点：

#main .red_p
#main p.red_p

或者，第三种方式，删除#main中的#main p，因此它不会比您的红色规则更具体。

按类覆盖后代选择器

2 个答案: