有没有办法从样式中应用 CSS 类？答案

【问题标题】：Is there a way to apply a CSS class from within a style?有没有办法从样式中应用 CSS 类？
【发布时间】：2012-09-20 21:51:33
【问题描述】：

我正在尝试在我的 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 类进行修改而不必太担心它的使用位置，而其他位置可以使用该类中的样式而不必担心，具体来说，它们是什么。

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

将color 属性添加到我想成为该颜色的每个元素。 不理想，因为如果我更改颜色，我必须更新每条规则以匹配新颜色。
将red 类添加到我想变成红色的每个元素。 不理想，因为这意味着我的 HTML 是口述演示文稿。
创建一个额外的规则，选择我想变成红色的每个元素，并对其应用color 属性。 不理想，因为很难找到所有样式化特定元素的规则，这使得维护更具挑战性

也许我只是个混蛋，以下选项是唯一的选择，我应该坚持下去。但是，我想知道“理想”（嗯，我的理想）方法是否存在，如果存在，正确的语法是什么？

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

【问题讨论】：

您可以点击投票下方的右标记接受正确答案

标签： css

【解决方案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 class.it 将在任何地方更改

【讨论】：

虽然从纯 CSS/HTML 的角度来看，这绝对是最好的答案，但我发现 Chris 更直接地解决了我希望完成的任务……即使它确实需要外部工具。

【解决方案2】：

简短回答：在纯 CSS 中无法做到这一点。

更长的答案：Sass 通过@extend directive 解决了这个问题。

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

这可以让您在开发中保持 CSS 模块化，尽管在使用它之前确实需要一个预编译步骤。不过效果很好。

【讨论】：

这绝对是我所希望的最接近的，正如一条评论指出的那样，通过 lesscss.org 有一个客户端选项，看起来非常相似（尽管它没有@extend 表示法）。我要试一试，看看预编译是否足够不显眼
另外，如果这对其他人有帮助，您可以在 Eclipse 中将 Sass 添加为 builder，这样每当您保存 .scss 文件时，例如，如果将其编译为其 CSS 等价物。（右键单击您的项目）>属性>构建器>新建>程序在我的情况下，我选择 scss 批处理文件作为我的应用程序，仅当我的 scss 目录中的资源发生更改时才刷新它，并将其设置为在自动运行期间运行构建（即保存时）

【解决方案3】：

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

【讨论】：

【解决方案4】：

我同意 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 的 sn-p 可能是您标记 CSS 的方式。

【讨论】：