在另一个类中调用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 */
}

逗号表示块A正文中的定义分别适用于每个选择器,因此它们适用于":active"的任何".btn"元素,并分别应用于任何".red"元素.

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