有没有办法从一个样式中应用CSS类？

我试图在我的CSS样式表中更模块化，并想知道是否有一些功能，如包含或应用，允许作者动态地应用一组样式。有没有办法从一个样式中应用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似乎是我最好的选择。但是，我想获得确认。

来源

2012-09-29 zashu

http://lesscss.org/ –

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

简答：在纯CSS中没有办法做到这一点。

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

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

这可以让你保持你的CSS模块化发展，但它确实需要一个预编译步骤中，您使用它之前。它工作得很好，但。

来源

2012-09-29 04:16:29

这绝对是最接近我所希望的，正如一个评论指出的那样，通过lesscss.org有一个客户端选项，它看起来很相似（尽管它没有@extend表示法）。我会给这个镜头，看看预编译是否足够不显眼 – zashu

此外，如果这有助于其他人，你可以添加萨斯作为[生成器]（http://stackoverflow.com/questions/8248567/如何在eclipse中配置eclipse-to-run-an-external-builder-or-shell-command），以便每当你保存一个.scss文件时，例如，如果将它编译成与它相当的CSS。（右键单击您的项目）>属性>构建器>新建>程序在我的情况下，我选择了scss批处理文件作为我的应用程序，只有当scss目录内的资源发生更改时才刷新，并将其设置为在自动构建期间运行（即保存时） – zashu

首先，你不能做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类别中更改，则它将随时更改

来源

2012-09-29 03:47:47 StaticVariable

虽然这绝对是纯粹的CSS/HTML视角的最佳答案，但我发现克里斯的更直接地解决了我希望能够完成...即使它确实需要一个外部工具。 – zashu

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

来源

2012-09-29 03:49:12

我同意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的方式。

来源

2012-09-29 04:12:36

有没有办法从一个样式中应用CSS类？

回答

相关问题