Question

以下是我想要做的一个简单示例。

我想为2个渐变背景定义css规则 - blueGradient和greenGradient。我希望css类foo的所有元素都具有blueGradient规则，并且在悬停时具有greenGradient规则。

所以，这就是我希望我的HTML看起来的方式：

<div class="foo">Hello</div>

这应该是正常的蓝色渐变，当我悬停在它上面时是绿色。

理想情况下，我希望我的CSS看起来像这样（我知道这不合法）：

.blueGradient {
...    
}
.greenGradient {
...
}
.foo {
<#include blueGradient>
}
.foo:hover {
<#include greenGradient>
}

实现这一目标的最佳方法是什么？如果这样的事情是不可能的，那么在我的CSS规则中没有多个blue / greenGradient定义副本的情况下，实现这一目标的最佳方法是什么？

我知道我可以将我的HTML更改为：

<div class="foo blueGradient">Hello</div>

但是，我如何处理悬停（我不想使用JS）？

Answer 1

对于要应用于多个选择器的规则，只需用逗号分隔：

.blueGradient, .foo {
/** blue gradient styling **/    
}

.greenGradient, .foo:hover {
/** green gradient styling **/
}

在同一个CSS文件中（实际上，如果您愿意，可以在不同的文件中），您可以根据需要多次为同一个选择器定义样式，这样您也可以定义.foo和{{1} }样式仅适用于这些选择器，不会与其他.foo:hover和.blueGradient元素共享：

.greenGradient

这不需要您更改您的HTML。如果在具有不同规则的两个条目中定义了相同的属性（例如.foo { /** foo-specific rules **/ } .foo:hover { /** foo:hover-specific rules **/ }，然后是margin: 0;），则最后一个条目优先。

如果您还希望将blueGradient样式应用于另一个选择器margin: 10px;，只需将其添加到链中：

.bar

（请注意，在上面的示例中，.blueGradient, .foo, .bar { /** blue gradient styling **/ }和.blueGradient选择器不是必需的，除非它们在别处使用。您可以使用代码注释替换它们，这些注释表明这是渐变的地方如果你愿意的话，正在申请。）

Answer 2

只使用CSS，以最少的代码重复完成此任务的最佳方法是执行以下操作：

.blueGradient, .foo {
...    
}
.greenGradient, .foo:hover {
...
}

在选择器中使用逗号可以一次为多个元素/ ID /类分配一个CSS块。

Answer 3

你无法完全按照CSS提出的建议。您可能希望使用LessCSS。它有一个名为Mixins的功能：

Mixins允许您通过简单地将类名作为其属性之一将类的所有属性嵌入到另一个类中。它就像变量，但对于整个类。 Mixins也可以像函数一样运行，并且可以使用参数，如下面的示例所示。

我知道这是JS，但它不需要你学习JS，只需将它贴在页面上。

否则你会被贾斯汀迈克尔和其他人所说的所困扰。对于大多数情况来说，这当然足够好了。您可能需要做的部分工作就是训练自己在CSS规则中思考。

在其他规则中有效地重用css规则

3 个答案: