css - 我可以将 2 种以上的样式组合成一个超样式吗？

Question

我希望将 2 种样式结合在一起以创建一种 super 样式，以便于使用和自定义我的页面。

是否可以定义这样的东西？ (如果是这样的话)

.bold { font-weight: bold;}
.color1 {color: white;}

.boldColor {.bold; .color1;}

where .boldColor is effectively

.boldColor {font-weight:bold; color:white;}

我想要这个，这样我就可以在整个页面上设置样式，并且能够轻松地在一个地方的许多地方更改颜色。我目前正在使用 <p class="bold color">但是我的一些类定义变长了，所以我希望能够使用 <p class="boldColor">

谢谢

Answer 1

你不能完全按照你的要求去做，但你可以通过使用逗号分隔多个共享相同属性的 css 选择器来获得类似的效果。

.bold, .boldColor {
    font-weight: bold;
}

.color1, .boldColor {
    color: white;
}

这样 class="boldColor" 将具有与 class="color1 bold" 相同的效果。