css - 有没有办法从样式中应用 CSS 类？

Question

我正试图在我的 CSS 样式表中更加模块化，并且想知道是否有一些功能，如包含或应用，允许作者动态应用一组样式。

由于我很难对问题进行措辞，也许举个例子会更有意义。

比方说，我有以下 CSS:

.red {color:#e00b0b}
#footer a {font-size:0.8em}
h2 {font-size:1.4em; font-weight:bold;}

在我的页面中，假设我希望 footer links 和 h2 元素都使用特殊的红色(可能还有其他位置我想使用它也是)。理想情况下，我想执行以下操作:

.red {color:#e00b0b}
#footer a {font-size:0.8em; apply-class:".red";}
h2 {font-size:1.4em; font-weight:bold; apply-class:".red";}

对我来说，这在某种程度上感觉是“模块化”的，因为我可以对 .red 类进行修改，而不必太担心它的使用位置，其他位置也可以使用样式在那堂课上，不用特别担心它们是什么。

我知道我有以下选择，并说明了为什么在我相当缺乏经验的情况下，它们并不完美:

1. 将 color 属性添加到我希望成为该颜色的每个元素。 不太理想，因为如果我更改颜色，我必须更新每条规则以匹配新颜色。
2. 将 red 类添加到每个我想变成红色的元素。 不太理想，因为这意味着我的 HTML 正在指示演示文稿。
3. 创建一个额外的规则，选择每个我想变成红色的元素，并将 color 属性应用于它。 不太理想，因为很难找到所有为特定元素设置样式的规则，这使得维护变得更具挑战性

也许我只是个 SCSS ，以下选项是唯一的选项，我应该坚持使用它们。不过，我想知道“理想”(好吧，我的理想)方法是否存在，如果存在，正确的语法是什么？

如果不存在，上面的选项 3 似乎是我最好的选择。但是，我想得到确认。

Answer 1

首先你不能做 apply-class:".red";

要执行此类操作，我建议您使用此方法

.red {color:#e00b0b;}
h2 {font-size:1.4em; font-weight:bold;}
.mymargin{margin:5px;}

<h2 class="red mymargin">This is h2</h2>

并在div中使用

<div id="div1" class="red mymargin"></div>

在这种情况下，如果您要更改 .red 类。它会在所有地方更改