Question

是否可以定义CSS样式，使其默认包含另一个？

例如，请使用以下类：

.rounded{
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}
.box{
  height:200px;
  width:400px;
}

不是在网站上的任何地方写<div class="rounded box">（这可能会导致较低的一致性，并且几乎肯定会导致html中的长字符串串），我可以定义.box以自动包含{ {1}}？

这对CSS和CSS标签中的冗余有影响 - 每次我来到新情况或上下文中的元素时，我不必指定border-radii，例如，可以合并{{1} }，.rounded或.big_rounded。

Answer 1

你可以这样做：

.box, .rounded {
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}

.box {
  height:200px;
  width:400px;
}

Answer 2

Melv给出了一个简单的解决方案，但CSS不支持真正的继承。

或者，有一些工具/框架可以扩展CSS语法。我所知道的两个流行的是LESS和SASS。它们的许多好处包括允许CSS继承的“mixins”。您使用框架的语法来表示继承，工具生成CSS。

少例：

.rounded{
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}
.box{
  height:200px;
  width:400px;
  .rounded; /* This is a mixin */
}

在CSS中定义“复合”样式

2 个答案: