我们可以在另一个css类中包含普通的css类吗？

Question

我是一个CSS新手。我只是想知道，有没有可能将一个公共类包含到另一个类中？

例如,

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

我偶然发现了css框架- Blueprint。我们需要将位置信息放入HTML中，例如

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

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

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

Answer 1

奇怪的是，即使CSS谈论继承，类也不能以这种方式“继承”。你能做的最好的事情是：

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

另外，我强烈建议你不要像这样做“裸体”类选择器。在可能的情况下，在class之外使用ID或标记：

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

我之所以这样说，是因为如果您尽可能广泛地使用选择器，那么一旦获得较大的样式表，就会变得难以管理(根据我的经验)。最终，您会看到意外的选择器相互交互，直到您创建一个新类(如.center2)，因为更改原始类将影响各种您不想要的东西。

Answer 2

在标准的CSS中，这是不可能的，尽管这会很好。

对于这样的东西，你需要使用SASS或类似的东西，它们被“编译”成CSS。

Answer 3

这就是级联样式表中的级联发挥作用的地方。

将您的html元素或小部件/模块(一组嵌套的html元素)看作一个对象。您知道您将拥有共享相同属性的对象，因此您将希望创建一个可重用的类，以供它们使用。

.baseModule {align: center;}

假设您的模块是一条消息(error、flash...)。因此，您可以“扩展”或“包含”您的.baseModule类，因为所有消息都将居中对齐(参见最后的html示例)。

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

此外，您还希望错误消息具有红色背景。此外，如果您希望边框是不同的颜色或其他颜色，则可以在此处覆盖.baseModule.message的边框属性。

.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不支持链式选择器(class1.class2.class3)，但它仍然是一个巧妙的技巧！