我可以在另一个css定义中包含一个css定义吗？

假设我在'foo.css'中有以下内容：

.border { border : solid 1px; }
#foo { color : #123; }
#bar { color : #a00; }

现在让我们假设我有两个div，我想要borders，所以我要：

<div id="foo" class="border">Foo</div>
<div id="bar" class="border">Bar</div>

Foo
酒吧

这很好，但我发现在css文件中定义#foo和#bar时，我宁愿给它们.border的特征，也不愿给div的类，如下所示：

.border { border : solid 1px; }
#foo {
  <incantation to inherit from .border>
  color : #123;
}
#bar {
  <incantation to inherit from .border>
  color : #a00;
}

.border{border:solid 1px；}
#福{
颜色：#123；
}
#酒吧{
颜色：#a00；
}

然后我的html就是：

<div id="foo">Foo</div>
<div id="bar">Bar</div>

Foo
酒吧

---

有人知道什么是魔法咒语吗？

css不支持。您所能做的最好的事情是：

#foo, #bar, .border { border : solid 1px; }
#foo { color : #123; }
#bar { color : #a00; }

---

你可能会对它感兴趣。Sass让您可以使用这样的技巧以更高效的方式编写css样式表。mixin允许您定义一组属性（例如，与边框有关），然后将这些属性包含在某些css类中。

正如Wsanville所说，您不能使用该类。 但是，正常的CSS继承是有效的——比如说，如果您的html是

<div class="border">
    <div id="foo">
       hello
    </div>
    <div id="bar">
       world
    </div>
</div>

---

在某些情况下，这可能足够好了

如果您希望进一步推动CSS，而不是使用前面文章中概述的一些技巧，那么您应该研究CSS编译器。它们采用您编写的类似CSS的代码，通常是添加了一些技巧的CSS，并将它们转换为web的常规CSS

介绍了一些功能强大的CSS编译器：

• 变量-好的程序员不喜欢硬编码。在许多情况下，您可以通过使用良好的继承在CSS中避免这种情况，但有时这是不可避免的。对于变量，更改颜色方案意味着更新一个变量而不是13个属性

• 数学-这与变量密切相关。假设左边的列是100px，右边的列是500px，包装器div是600px。嗯，也许你决定把它改成960像素。如果列的宽度自动调整，那不是很棒吗？答案是肯定的

• 嵌套样式-这可能是最重要的。CSS是扁平的，这意味着复杂的网站最终会使用CSS，这是一种痛苦的经历

---

您可以在his中阅读流行的编译器，或者进行一些搜索，找到最适合您的编译器。

在主题之外，我要补充一点，当使用

边框

速记时，正确的值顺序是

边框宽度

，然后是

边框样式

，然后是

边框颜色

。因此，

border:solid 1px

是无效的CSS，它应该是

border:1px solid

。现在，浏览器对这类错误非常宽容，但这不是可以无限期依赖的。好的一点，我只是复制了OP的样式而没有修改实际规则。我真的不能做#foo，#bar，.border{border:solid 1px}因为我想要的真正定义是在我热链接到的jQueryUICSS文件中，所以我需要上面列出的解决方案。谢谢你的回复，知道这件事做不到很有帮助。还有，我不知道边境秩序的事。谢谢。除非你引用像谷歌这样的CDN的jQuery UI，那么你应该考虑托管你需要的CSS文件并相应地修改它们。嗯，有趣。我已经在使用haml，所以在我的css中使用sass将是一个自然的下一步，可以解决css的这个特殊缺点。谢谢你们每个人的回复！

.border {border: 1px solid #f00;}
#foo {border:inherit;}