我应该使用！重要与否？

Question

我经常遇到这个问题而且不确定最优雅的解决方案。我不想使用!important，虽然这样可行。

我的网站上有文章，这些文章包含在课程article的div中。相应的CSS像这样控制H4标签。

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

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

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

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

Answer 1

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

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

Answer 2

您需要使用child selector。如果你的.article类只是一个包装器而h4元素是它的直接子元素，那么这是一个简单的修复。子选择器为widely supported。

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

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

Answer 3

假设你的标记是这样的：

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