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

Question

我知道id优先于class;不幸的是我的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的样式所取代，这些样式与我需要的样式不同。

我需要使用哪些CSS来获取特定的div，请记住，正如我所说，我无法为其添加ID。

Answer 1

CSS Specificity就是答案（为什么你的风格被覆盖）。选择器中的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; }

Answer 3

顶级样式的分数为{0, 1, 2, 0}，第二种样式的分数为{0, 0, 2, 1}，您需要在第二种样式中添加ID（#homepage_speakers或许？）使其更高的预防性。 CSS发生的顺序仅在两个样式具有相同分数时才起作用。

或者只是将!important添加到第二个样式，但我不喜欢这样做，因为我喜欢有一个合适的CSS层次结构。

CSS选择器得分由{Is Important 1/0, number of IDs, number of Classes, number of Elements}计算。较高的订单号始终具有较高的预测值，例如，具有1个ID的规则高于具有5个类且没有ID的规则。

Answer 4

有几个选择。最简单的可能是将你的线移到＃home-block-area ...部分之后。从上到下读取CSS，向下的元素覆盖上面的元素。

Answer 5

令人遗憾的是，你被迫以一种黑客的方式解决问题......

#home-blocks-aread .block div.content { background: none; }

可以胜任。