我们可以在另一个CSS类中包含常见的CSS类吗？

我是一个CSS新手。 我只是想知道，是否有可能将一个普通class级join另一个class级？

例如，

.center {align: center}; .content { include .center here}; 

我遇到了CSS框架 – 蓝图 。 我们需要将位置信息放入HTML中，例如

 <div class="span-4"><div class="span-24 last"> 

因此，我们将把定位属性放在html而不是css中。 如果我们改变布局，我们需要改变html而不是css。

这就是我问这个问题的原因。 如果我可以包括.span-4到我自己的CSS中，我将不必在我的HTML标记中指定它。

Answer 1

奇怪的是，即使CSS谈到inheritance，类也不能“inheritance”这种方式。 你可以做的最好的是这样的：

 .center, .content { align: center; } .content { /* ... */ } 

另外，我强烈build议你不要做这样的“裸体”类select器。 尽可能使用ID和标签

 div.center, div.content { align: center; } div.content { /* ... */ } 

我这样说是因为如果你尽可能地select你的select器，那么一旦你得到大的样式表就会变得难以pipe理（以我的经验）。 你最终会有意想不到的select器相互作用，直到你创build一个新的类（比如.center2），因为改变原来的东西会影响你不想要的各种东西。

Answer 2

这是级联样式表中的级联进来玩的地方。

把你的html元素或者widget /模块（嵌套的html元素组）作为一个对象。 你知道你将拥有共享相同属性的对象，所以你需要创build一个可以使用的可重用类。

 .baseModule {align: center;} 

说你的模块是一个消息（错误，闪存…）。 所以你“扩展”或“包含”你的.baseModule类，因为所有的消息将被中心alignment（见最后的html例子）。

 .message {border: 1px solid #555;} 

此外，你希望你的错误消息有一个红色的背景。 另外，如果你希望它是一个不同的颜色或东西，你可以在这里覆盖.baseModule.message的border属性。

 .error {background-color: red;} 

所以现在你有一些可以轻松重用的css定义。

 <!-- Regular message module --> <p class="baseModule message"> I am a regular message. </p> <!-- Error message module --> <p class="baseModule message error"> I am an error message. My background color is red. </p> 

为了把这个和你的问题联系起来，你基本上可以利用多个类名来获得最大的可重用性。 授予ie6不支持链式select器（class1.class2.class3），但它仍然是一个整洁的把戏！

Answer 3

在标准的CSS，这是不可能做到这一点，但它会很好。

对于这样的事情，你需要使用SASS或类似的，“编译”到CSS。