为什么我的CSS类被覆盖/忽略？

Question

我知道id优先于类；不幸的是，我的html是由Drupal生成的，我无法为需要样式的特定div添加ID。

这是精简的基本HTML（为简洁起见删除了内容）。

<div id="home-blocks-area" class="clearfix">
    <div align="center" id="homepage_speakers">
        <div class="region region-home-speakers">
            <div id="block-speaker-carousel-speaker-carousel" class="block block-speaker-carousel ">
                <div class="content">
                <!-- actual content -->
                </div>
            </div>
        </div>
    </div>
</div> 

我需要能够<div class="content">使用样式表来定位该div。问题是，根据Firebug的说法，我的样式代码已被的样式所取代#home-blocks-aread .block .content，这与我为此div所需的样式不同。

要达到该特定div，我需要使用什么CSS，请记住，正如我所说，我不能在其中添加ID。

Answer 1

答案是CSS特殊性（关于为什么要覆盖您的样式）。选择器中的ID比您的两类样式具有更高的特异性。

您需要对样式进行更具体的说明（可能添加更多的类或添加更多的根元素以增加其值），或者（如上所述）创建一个ID，该ID会超出当前的样式表。

您也可以使用!important，但是许多人会认为，考虑到它的主要意图，这是针对客户端自定义（用于可访问性）的。

Answer 2

您可以增加它的重要性，如下所示：

.region-home-speakers div.content { background: none !important; }

然而，这样做并不是一个好的做法。我肯定会像 BoltClock 所说的那样将 CSS 更改为如下所示：

#home-blocks-area .region-home-speakers div.content { background: none; }