为什么我的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的样式覆盖了，而这些样式并不是我需要的用于这个div的样式。 我需要使用什么CSS来获取该特定div，记住，如我所说，我不能为其添加ID。

- EmmyS

---

你能不能在第二个选择器中添加 #home-blocks-area 来平衡它呢？毕竟你知道 ID 比类更具体（而且你刚刚用这个知识回答了你的标题）。 - BoltClock

Answer 1

CSS Specificity就是答案（解释为什么你的样式被覆盖）。选择器中的ID比你的两个类样式具有更高的特异性。

你需要在样式上更具体（可能添加更多的类或添加更多的根元素来增加其值），或者（如你所提到的）创建一个优先于当前样式表的ID。

你也可以使用!important，但许多人认为这是一种hack-ish，因为它的主要意图是用于客户端定制（以实现辅助功能）。

- Brad Christie

---

我所说的是，由于HTML是由Drupal动态生成的，因此我无法添加ID。 - EmmyS

@EmmyS：我知道你不能给“那个”元素加一，但是你可以使用父列表中现有的ID来增加该样式的特异性。 - Brad Christie

Answer 2

你可以如此为其添加重要性：

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

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

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

- Drew

Answer 3

顶部样式的分数为{0, 1, 2, 0}，第二个样式的分数为{0, 0, 2, 1}，您需要为第二个样式添加一个ID（也许是#homepage_speakers？）以使其优先级更高。当两个样式具有相同的分数时，CSS出现的顺序才有意义。

或者，只需向第二个样式添加!important，但我不喜欢这样做，因为我想要一个正确的CSS层次结构。

CSS选择器得分通过{是否重要1/0，ID数量，类数量，元素数量}计算。较高的数字始终具有较高的优先级，例如，具有1个ID的规则优先于没有ID和5个类的规则。

- Matthew

Answer 4

有几个选择。最简单的可能是将您的代码移到 #home-block-area... 段落之后。CSS 从上往下读取，越靠下的元素会覆盖上面的元素。

- user1337

Answer 5

很遗憾你被迫以一种不太正规的方式来解决这个问题...

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

能够完成任务。

- hcarver