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

是否有可能有一个CSS类参考？而不是重新编写所有的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类元素的'活跃'状态...

如果你可以帮助解决（它不需要我所要求的方式），我将不胜感激...

来源

2011-06-13 Abhishek

你实际上不能做一个引用（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的主体中的定义分别应用于那些选择器中的每个，因此它们适用于任何“.btn”元素是‘：活动的’，并分别适用到任何“.red”元素。

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

来源

2011-06-13 06:19:53

嗯......我理解这个概念，你将共同的属性分享给.btn：active和.red类......但是你看，内容完全一样。也许我只是用你的第一个声明？这样我只定义一次属性，但它们同时适用于.btn：active和.red类。 – Abhishek 2011-06-13 06:34:36

@ Abhishek：是的，就是这样。如果一切都应该完全一样，你只需定义第一条规则，而不是其他两条。另外两个就是如果您需要定义一些仅限于“.btn：active”或“.red”而不是其他属性的其他属性。他们分享的一切都在第一条规则中。如果他们共享一切，那么这是* only *规则。 – 2011-06-13 06:39:26

K队友，感谢相当超级的协助...... :-) – Abhishek 2011-06-13 06:51:49

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

回答

相关问题