logo标签列表

我可以，一个CSS定义可以包含另一个CSS定义吗？

css
5

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

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

现在假设我有两个div需要加边框，那么我可以这样操作：
<div id="foo" class="border">Foo</div>
<div id="bar" class="border">Bar</div>

这个很好用，但我发现在我的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;
}

然后我的HTML就会变成这样：
<div id="foo">Foo</div>
<div id="bar">Bar</div>

有人知道那个神奇的咒语是什么吗？

（这句话涉及到技术领域，具体上下文需要考虑）
4个回答
7

这在CSS中是不支持的。你可以做的最好的事情就是像这样：

#foo, #bar, .border { border : solid 1px; }
#foo { color : #123; }
#bar { color : #a00; }
2
离题一点，我想补充一下，当使用 border 简写属性时，正确的值顺序应该是 border-width、border-style、border-color。因此，border: solid 1px 是无效的 CSS，应该写成 border: 1px solid。目前，浏览器对这种错误非常宽容，但不能无限期地依赖这一点。 - ЯegDwight
好的，我只是简单地复制了原帖中的样式，而没有修改实际规则。 - wsanville
我实际上不能使用 #foo,#bar,.border{border:solid 1px} 这种方式，因为我想要的真正定义在一个我正在热链接到的jquery-ui css文件中，这就是为什么我需要上面概述的解决方案。感谢您的回复，知道它无法完成对我很有帮助。另外，我不知道边框顺序的事情。谢谢。 - ynkr
除非您从Google等CDN引用jquery-ui，否则应考虑托管所需的CSS文件并相应地进行修改。 - wsanville
1
你可能会对Sass混合感兴趣。Sass让你以更高效的方式编写CSS样式表，使用像这样的技巧。混合让你定义一组属性（比如边框），然后在某些CSS类中包含这些属性。
哦，有趣。我已经在使用Haml了，所以使用Sass来处理我的CSS问题是很自然的下一步，并且能解决这个特定的CSS缺点。谢谢你们每个人的回复！ - ynkr
0

如果你想深入了解CSS而不是使用早期文章中概述的一些技巧，那么你应该研究一下CSS编译器。它们可以将你编写的类似CSS的代码（通常是添加了一些技巧的CSS）转换成Web上的普通CSS。

David Ziegler 写了一些很酷的CSS编译器提供的功能：

变量 - 好的程序员不喜欢硬编码。在许多情况下，您可以通过使用良好的继承来避免这种情况，但有时是不可避免的。使用变量，更改颜色方案意味着更新一个变量而不是13个属性。
数学 - 这与变量相辅相成。假设您的左列为100px，右列为500px，包装器div为600px。嗯，也许您决定将其更改为960px。如果列的宽度自动调整，那不是很棒吗？答案是肯定的。
嵌套样式 - 这可能是最重要的。CSS是平面的，这意味着复杂的站点最终会出现令人头疼的CSS。
您可以阅读他在博客文章中关于流行编译器的介绍，或者搜索并找到最适合您的编译器。
0

正如Wsanville所说，您不能使用该类。 但是普通的CSS继承确实有效-比如说，如果您的HTML是

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

你可以这样说：
.border {border: 1px solid #f00;}
#foo {border:inherit;}

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接