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

原文 标签 css css-selectors

我知道 id 优先于类;不幸的是,我的 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 的样式不同。
enter image description here

我需要使用什么 CSS 来获取该特定 div,请记住,正如我所说,我无法向其添加 id。

最佳答案

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

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

您也可以使用 !important ,但许多人会争辩说,考虑到它的主要目的是为了客户端自定义(用于可访问性),这是 hack-ish。

关于css - 为什么我的 CSS 类被覆盖/忽略?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11437407/

相关文章:

html - 如何使用复选框制作类显示块

css - 第n个 child 主播

java - 服务器端CSS选择器

html - 在到达某个类之前将 CSS 应用于一组 HTML 标签

html - 为什么我的div中的内容弹出?

html - 将 background-image "stretch to fit"作为我页面的背景

css - pre给我之前和之后的空行

css - 在响应网站上,DIV覆盖滑块,但在台式机上不覆盖

html - 背景速记属性分配?

css - CSS所有以链接开头的-CSS选择所有以“u”开头并且在:hover中的ID,并控制其他以u开头的ID