有可能有一个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类的所有元素的“活动”状态应用相同的渐变样式.
如果你能帮助解决(这不一定是我要求的方式),我会非常感激
解决方法
你实际上不能做一个引用(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中的任何内容,并且这些块将“赢”.
