我们可以在另一个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 { /* ... */ }

另外我强烈建议你不要这样做“裸”类选择器。在可能的情况下，除了课程之外还使用ID或标签：

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

我之所以这么说，是因为如果你做的选择器尽可能广泛，一旦你获得大型样式表，最终会变得难以管理（根据我的经验）。您最终会将非预期的选择器相互交互到您创建新类（如.center2）的位置，因为更改原始内容会影响您不想要的各种事物。

Answer 2

这是Cascading Style Sheets中的级联进场。

将您的html元素或窗口小部件/模块（嵌套的html元素组）视为对象。您知道您将拥有共享相同属性的对象，因此您需要创建可以使用的可重用类。

.baseModule {align: center;}

假设您的模块是一条消息（错误，闪烁...）。因此，您“扩展”或“包含”.baseModule类，因为所有消息都将居中对齐（请参阅最终的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不支持链式选择器（class1.class2.class3），但它仍然是一个巧妙的技巧！

Answer 3

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

对于类似的东西，你需要使用SASS或类似的，“编译”到CSS。