0

我经常遇到这个问题,不确定最优雅的解决方案。我不想使用!important,虽然那会起作用。

我在我的网站上有文章,这些文章包含在一个 div 类article中。对应的 CSS 像这样控制 H4 标签。

.articles h4 {
font-size: 16px;
}

然而,在我的文章中,我有一个带有类的 div 元素,notice它也有许多 H4 标签,但是当我在下面使用这个 CSS 时,articles会应用类的声明。

.notice h4 {
font-size: 24px;
}

我想要的是一个解决方案,这意味着我不必将类应用于实际的 H4 标记notice ——我希望能够通过其容器元素指向 H4 标记。

4

3 回答 3

0

您应该尝试更具体地定位课程。尝试使用

.articles .notice h4 {
    font-size: 24px;
}
于 2012-09-13T13:39:41.420 回答
0

您需要使用子选择器。如果您的.article类只是一个包装器并且 h4 元素是它的直接子元素,那么这很容易解决。子选择器得到广泛支持

.article > h4 { font-size: 16px; }

子选择器不会将其任何样式应用于不是直接祖先的元素。因此,如果您在另一个包装器中有另一个 h4 元素,它将没有包装器外部的样式。

于 2012-09-13T13:40:15.900 回答
0

假设您的标记是这样的:

<div class="articles">
    <h4> Article Title </h4>
    <div class="notice">
        <h4> Notice Title </h4>
    </div>
</div>

只要

.notice h4 {
    font-size: 24px;
}

在你的css文件中的.articles下面它应该可以工作。但是,另一个解决方法是使用

.articles .notice h4 {
    font-size: 24px;
}
于 2012-09-13T13:43:08.547 回答