50

我是一个 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 标记中指定它。

4

3 回答 3

39

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

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

另外我强烈建议你不要做这样的“裸”类选择器。尽可能在类之外使用 ID 或标签：

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

我这样说是因为如果你的选择器尽可能广泛，一旦你得到大的样式表，它最终会变得难以管理（根据我的经验）。您最终会遇到意外的选择器相互交互到创建新类（如 .center2）的地步，因为更改原始选择器会影响您不想要的各种东西。

于 2009-10-16T04:58:37.057 回答
14

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

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

.baseModule {align: center;}

假设您的模块是一条消息（错误，闪存...）。因此，您“扩展”或“包含”您的 .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），但它仍然是一个巧妙的技巧！

于 2009-10-16T05:41:06.530 回答
14

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

对于类似的事情，您需要使用 SASS 或类似的东西，它们“编译”为 CSS。

于 2009-10-16T04:59:21.707 回答