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

时间:2012-07-11 16:43:22

标签: css css-selectors

我知道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的样式所取代,这些样式与我需要的样式不同。 enter image description here

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

5 个答案:

答案 0 :(得分:4)

CSS Specificity就是答案(为什么你的风格被覆盖)。选择器中的ID增加了比两类样式更高的特异性。

您需要更具体地考虑您的风格(可能添加更多类或添加更多根元素以增加其值)或(如您所述)创建一个超出当前样式表的ID。

您也可以使用!important,但许多人会认为,因为黑客认为它的主要目的是客户端自定义(用于可访问性)。

答案 1 :(得分:3)

你可以增加它的重要性,如下:

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

然而,这样做并不是一个好习惯。我肯定会改变像BoltClock这样的CSS:

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

答案 2 :(得分:2)

顶级样式的分数为{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的规则。

答案 3 :(得分:0)

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

答案 4 :(得分:0)

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

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

可以胜任。