为什么我的CSS类被覆盖/忽略? [英] Why is my CSS class being overwritten/ignored?

问题描述

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

I know that id takes precedence over class; unfortunately my html is generated by Drupal and there's no way for me to add an id to the particular div that needs styling.

这是基本的，精简的HTML(为简洁起见，删除了内容).

Here's the basic, stripped-down HTML (content removed for brevity).

<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所需的样式不同.

I need to be able to target that <div class="content"> div with a stylesheet. Problem is, according to Firebug my style code is being superseded by the styles for #home-blocks-aread .block .content, which are not the same style I need for this one div.

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

What CSS do I need to use to get at that specific div, keeping in mind that as I said, I cannot add an id to it.

推荐答案

您可以像这样添加重要性:

You could add importance to it, like so:

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

但是，这样做不是一个好习惯.我肯定会像BoltClock所说的那样将CSS更改为这样的内容:

However, it's not a great practice to do it like this. I would definitely change the CSS like BoltClock says to something like this:

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

这篇关于为什么我的CSS类被覆盖/忽略?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！