css - 在另一个类中调用 CSS 类？

Question

是否可以让一个 CSS 类引用另一个？而不是重新重写所有的 css 代码？

例如，我有这个:

.btn{
    /* Whatever btn related styles I have */
}

.btn:hover{
    box-shadow:0 0 4px black;
}

.btn:active{
    /* This is where I want to reference the '.red' class */
}

.red{
    /* There is a LOT of CSS code here for cross browser gradients */
}

问题是，我已经在某些地方使用了 .red 类，而且我还想将相同的渐变样式应用于具有 .btn 类的所有元素的“事件”状态。 .

如果您能帮助解决(不必像我要求的那样)这个问题，我将不胜感激......

Answer 1

你实际上不能做引用(CSS 的主要失败之一)，但你可以这样做:

.btn:active, .red {
    /* Block A: Most (or all) of what used to just be in .red below */
}

.btn:active {
    /* Block B: Stuff *just* for .btn:active, if any */
}

.red {
    /* Block C: Stuff *just* for .red, if any */
}

逗号表示 block A 主体中的定义分别应用于这些选择器中的每个，因此它们应用于任何“:active”的“.btn”元素，并且分别适用于任何“.red”元素。

Block B 和 Block C 是可选的。它们适用于您只想应用于给定选择器的任何定义。您通常将这些列在 block A 之后，因为从上到下应用了相同特异性的规则，因此您可以覆盖 block A 中您想要在 block B 或 block C 中使用的任何内容，并且这些 block 将“赢”。