是否可以制作一个结合了两个或更多其他CSS规则的CSS规则？

Question

例如：

.strong {
        font-weight: bold;
}
.italicized {
        font-style: italic;
}
.strong_and_italicized {
        .strong;
        .italicized;
}

我问，因为我正在处理一些jquery，它正在操作一些已经从jquery ui主题css文件中分配了多个不同类的DOM对象。在我看来，将多个类组合成一个类会更容易，然后我可以在尝试选择DOM对象时在javascript代码中引用该类。

Answer 1

将CSS类组合成一个类似的方法，我知道，使用CSS预处理器，如LESS或SASS。

如果您不想使用它，我担心您必须单独分配两个类。

Answer 2

使用纯CSS，无法合并其他两个现有规则。

如果您需要组合两个css规则，只需在元素上使用这两个类：

.foo {
  color: #F00;
}
.bar {
  font-size: 10px;
}

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

使用CSS，你可以链选择器：

.foo.bar {
  color: #0F0;
  font-size: 10px;
}

jQuery也将选择带有链式类的元素：

$('.foo.bar').do(stuff);

---

此外，不要 永远 编写暗示风格的类。这不是语义，并且当你想重用你的HTML但改变你的css时会更难。

类似的东西：

.italicized {
  font-weight: bold;
}

没有意义，而：

.title {
  font-style: italic;
}

对造型没有任何影响。

Answer 3

您可以使用Less CSS完成此操作。它甚至使用了示例中的语法。

Answer 4

您可能想尝试在每个CSS规则中添加一个逗号，以便对它们进行分组