我们可以在另一个css类中包含公共css类吗？

我是CSS新手。我只是想知道，是否可以将一个普通类包含到另一个类中

比如说,

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

我遇到了css框架-。我们需要将位置信息放入HTML，例如

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

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

---

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

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

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

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

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

---

我这样说是因为如果你尽可能广泛地使用选择器，那么一旦你得到了大的样式表，它就会变得难以管理（以我的经验）。最终会出现意外的选择器相互交互，从而创建一个新类（如.center2），因为更改原始类会影响所有您不想要的内容。

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

---

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

这就是层叠样式表中的层叠的作用

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

.baseModule {align: center;}

假设您的模块是一条消息（错误、闪存…）。因此，您可以“扩展”或“包含”您的.baseModule类，因为所有消息都是中心对齐的（请参见最后的html示例）

此外，您希望错误消息具有红色背景。此外，如果希望边框属性为其他颜色或其他内容，可以在此处覆盖.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），但它仍然是一个巧妙的技巧

+1这些系统只会使CSS的编写变得更容易一些——它们最终都会成为普通的CSS。我强烈反对避免使用裸类选择器。在我从事CSS的所有岁月中，我从未遇到过将两个概念上不同的类命名为同一类的问题。如果您这样做了，那么a）您可以轻松地更改一个名称，b）指定元素名称不会解决问题，只会降低问题的可预测性，进而更难诊断和解决问题，因为大多数情况下，元素不匹配，因此错误只会在部分时间出现。真正的问题是使用像“center”这样的类名。我必须部分同意cletus和Thom的观点。首先，像“中心”这样的类描述了它应该是什么样子，而不是它是什么，并且应该避免。像“content”这样的语义类名是更好的选择。现在，关于使用宽（或“裸”）选择器，我必须同意克莱特斯的观点——这真的是一个灾难。Firebug使识别bug变得更容易，但是如果您有十个

每个都有不同的语义，那么每个都应该有自己的类。如果它们共享显示属性，那么使用多个选择器（例如，

div.content，div.author\u name{}

）回答有什么问题吗？我发现这比任何东西都有帮助，在背景颜色方面，但我们要做的事情很困难。T.T

<!-- 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>