5

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

这是基本的、精简的 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。

4

5 回答 5

5

CSS Specificity是答案（至于您的样式被覆盖的原因）。选择器中的 ID 比您的二分类样式添加了更高的特异性。

您需要更具体地了解您的样式（可能添加更多类或添加更多根元素以增加其价值）或（如您所述）创建一个超过当前样式表的 ID。

您也可以使用!important，但许多人会争辩说，考虑到它的主要目的是为了客户端自定义（为了可访问性），这有点骇人听闻。

于 2012-07-11T16:47:17.633 回答
3

你可以增加它的重要性，像这样：

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

但是，这样做并不是一个好习惯。我肯定会像 BoltClock 所说的那样将 CSS 更改为这样的：

#home-blocks-area .region-home-speakers div.content { background: none; }
于 2012-07-11T16:45:53.483 回答
2

top style{0, 1, 2, 0}的 score 和 2nd style 的 score 是{0, 0, 2, 1}，你需要给 2nd style 添加一个 ID（#homepage_speakers也许？），以使其更准确。CSS 出现的顺序仅在两种样式具有相同分数时才重要。

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

CSS 选择器得分由{Is Important 1/0, number of IDs, number of Classes, number of Elements}. 较高的序号总是具有较高的优先级，例如，具有 1 个 ID 的规则高于具有 5 个类且没有 ID 的规则。

于 2012-07-11T16:50:06.183 回答
0

有几个选择。最简单的方法可能是将您的行移到 #home-block-area... 部分之后。CSS 是自上而下读取的，越往下的元素会覆盖上面的元素。

于 2012-07-11T16:46:24.757 回答
0

很遗憾，您被迫以一种骇人听闻的方式解决问题...

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

会做的工作。

于 2012-07-11T16:47:28.710 回答