有没有一种方法可以在样式中应用CSS类？

Question

我试图在我的CSS样式表中更加模块化，想知道是否有一些类似于包含或应用的功能可以允许作者动态地应用一组样式。

由于我很难用语言描述这个问题，也许举个例子会更清楚明白。比如说，我有以下CSS：

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

假设在我的页面中，我想让底部链接和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属性。 不理想，因为更难找到所有样式特定元素的规则，使维护变得更具挑战性。

也许我只是在耍无赖，以上选项是唯一的选项，我应该坚持使用它们。 但是，我想知道是否存在“理想”（嗯，我的理想）的方法，如果存在，正确的语法是什么？

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

- zashu

---

你可以通过点击下方的正确标记来接受正确答案。 - user1280616

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 类，则会在所有地方进行更改。

- StaticVariable

---

虽然从纯CSS / HTML的角度来看，这绝对是最好的答案，但我发现克里斯的回答更直接地解决了我希望实现的目标……即使它需要一个外部工具。 - zashu

Answer 2

简短回答：无法仅使用 CSS 实现此功能。

详细回答：Sass 通过 @extend 指令 解决了这个问题。

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

这样做可以让你在开发中保持你的CSS模块化，但是在使用之前需要进行预编译。尽管如此，它的效果非常好。

- Chris Heald

---

这绝对是我所期望的最接近的，正如一条评论指出的那样，通过 lesscss.org 存在一个客户端选项，看起来非常相似（尽管它没有 @extend 注释）。我要试一试，看看预编译是否足够不显眼。 - zashu

此外，如果有人需要帮助，你可以在Eclipse中将Sass添加为构建器，这样每当你保存一个.scss文件时，它就会将其编译成相应的CSS文件。（右键单击项目）>属性>构建器>新建>程序在我的情况下，我选择了scss批处理文件作为我的应用程序，只有在scss目录内的资源发生更改时才刷新它，并设置它在自动构建期间运行（即在保存时）。 - zashu

Answer 3

我同意DarthCaesar和jhonraymos的观点。要使用JavaScript更新一个类，你只需要简单地：

function toggleColorClass(e){
    var redClass = document.getElementsByClassName('red');
    redClass.removeAttribute('class', 'red');
    /*Set the class to some other color class*/
    redClass.setAttribute('class', 'blue');
}

当然，要使这个工作正常，您需要在文档中的某个位置包含上述函数...如果这是您使用的所有JS，则可以将其粘贴到头部甚至使用内联。您可能还希望编写它，以便切换在两个方向上进行，即打开和关闭变红。此外，jhonray的片段可能是您想要标记CSS的方式。

- user1193509

Answer 4

您可以使用JavaScript中的DOM动态编辑HTML标签的id和/或class属性。

- Cezary Wojcik