html - 如何将 CSS 规则附加到另一个 CSS 规则

Question

这是一个简单的问题。但是，我在搜索 10 分钟后找不到答案。我想用例子来解释我的问题，这样你就能明白我在说什么。

假设有一个带有 id 的 div 标签，里面还有一些文本:

<div id="text">Hello World</div>

我还有 css 规则，可以将文本变成红色。

.makeRed{
   color: #FF0000;
}

问题是我想在我的 div 标签中将文本设为红色。我可以简单地这样做:

<div id="text" class="makeRed">Hello World</div>

除了这样做，还有其他方法可以使该文本变成红色吗？因为如果我继续向我需要的每个 div 添加 makeRed 规则，它会将我的 html 变成垃圾。所以我想知道有没有什么办法可以把它弄清楚。我想将这种方式用于我的一些 div 的“clearfix”方法。

每当我需要 clearfix 时，我都喜欢这个，但这是不好的:

<div class="clearfix">
   <div id="text">Hello World</div>
</div>

Answer 1

问题是:你想让哪个文本变红，为什么？

如果你想让你所有的div的文本都是红色的，你可以这样写

div{ color: red; }

如果只是为了错误消息，我会添加类“error”而不是“red”。这样，您可以使 HTML 更加语义化。你仍然需要添加一个类，但它有更多的意义:

.message.error { color: red; }