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

标签 css css-selectors

<分区>

我知道 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 的样式不同。 enter image description here

我需要使用什么 CSS 来获取那个特定的 div,请记住,正如我所说,我不能向它添加 id。

最佳答案

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

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

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

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

相关文章:

css - 行内 block 元素之间的边距

html - 水平导航中的所有元素都在同一高度

html - 悬停后如何保持原始字体颜色?

html - 将更改的属性设置为 span

css - 如何指定可以匹配给定选择器的多个类?

javascript - JQuery - Chrome 中的背景图像旋转问题(仅在 F5 刷新后有效)。在 FF、Safari、IE 中没有问题

javascript - 在另一个 div 中保持 div 纵横比

html - 将 CSS 应用于除某些类后代之外的任何元素?

css - 第 n 个 child 对类没有反应

html - 基于没有类的祖先的 CSS 选择器