我们可以在另一个 css 类中包含通用 css 类吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1576147/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can we include common css class in another css class?
提问by janetsmith
I am a CSS newbie. I am just wondering, is that possible to include one common class into another class?
我是 CSS 新手。我只是想知道，是否可以将一个通用类包含到另一个类中？
for example,
例如，
.center {align: center};
.content { include .center here};
I came across css framework - Blueprint. We need to put the position information into HTML, e.g.
我遇到了 css 框架 - Blueprint。我们需要将位置信息放入HTML中，例如
<div class="span-4"><div class="span-24 last">
As such, we will place the positioning attribute inside html, instead of css. If we change the layout, we need to change html, instead of css.
因此，我们将定位属性放在 html 中，而不是 css 中。如果我们改变布局，我们需要改变html，而不是css。
That's the reason I ask this question. If I can include .span-4 into my own css, i won't have to specify it in my html tag.
这就是我问这个问题的原因。如果我可以将 .span-4 包含到我自己的 css 中，我就不必在我的 html 标签中指定它。
回答by cletus
Bizarrely, even though CSS talks about inheritance, classes can't "inherit" in this way. The best you can really do is this:
奇怪的是，即使 CSS 谈论继承，类也不能以这种方式“继承”。你真正能做的最好的是：
.center, .content { align: center; }
.content { /* ... */ }
Also I'd strongly suggest you not do "naked" class selectors like this. Use ID or tag in addition to class where possible:
另外我强烈建议你不要像这样“裸”类选择器。尽可能在 class 之外使用 ID 或 tag：
div.center, div.content { align: center; }
div.content { /* ... */ }
I say this because if you do your selectors as broad as possible it ends up becoming unmanageable (in my experience) once you get large stylesheets. You end up with unintended selectors interacting with each other to the point where you create a new class (like .center2) because changing the original will affect all sorts of things you don't want.
我这样说是因为如果你的选择器尽可能广泛，一旦你获得大型样式表，它最终会变得难以管理（根据我的经验）。您最终会遇到意外的选择器相互交互到您创建新类（如 .center2）的地步，因为更改原始类会影响您不想要的各种事物。
回答by Derek Reynolds
This is where the Cascadingin Cascading Style Sheets comes in to play.
这就是层叠的层叠样式表也发挥了作用。
Think of your html element or widget/module (group of nested html elements) as an object. You know you're going to have objects that share the same properties so you'll want to create a reusable class they can utilize.
将您的 html 元素或小部件/模块（一组嵌套的 html 元素）视为一个对象。您知道您将拥有共享相同属性的对象，因此您需要创建一个它们可以使用的可重用类。
.baseModule {align: center;}
Say your module is a message (error, flash...). So you "extend" or "include" your .baseModule class because all messages will be center aligned (see final html example).
假设您的模块是一条消息（错误、闪烁...）。因此，您“扩展”或“包含”您的 .baseModule 类，因为所有消息都将居中对齐（请参阅最终的 html 示例）。
.message {border: 1px solid #555;}
Furthermore you want your error messages to have a red background. Additionally you can overwrite the border property from .baseModule.message here if you wanted it to be a different color or something.
此外，您希望错误消息具有红色背景。此外，如果您希望它是不同的颜色或其他东西，您可以在此处覆盖 .baseModule.message 中的边框属性。
.error {background-color: red;}
So now you have a few css definitions that can be reused with ease.
所以现在您有一些可以轻松重用的 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>
To relate this to your question you'd basically leverage multiple class names for maximum reusability. Granted ie6 doesn't support chained selectors (class1.class2.class3), but it's still a neat trick!
将此与您的问题联系起来，您基本上会利用多个类名来实现最大的可重用性。当然，ie6 不支持链式选择器（class1.class2.class3），但它仍然是一个巧妙的技巧！
回答by Deeksy
In standard CSS, it's not possible to do this, though it would be nice.
在标准 CSS 中，这是不可能的，尽管这样做会很好。
For something like that you'd need to use SASS or similar, which "compiles" to CSS.
对于类似的事情，你需要使用 SASS 或类似的东西，它“编译”成 CSS。
