css - 我应该使用 !important 还是不使用？

Question

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

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

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

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

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

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

假设您的标记是这样的：

<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;
}

3 回答 3