Question

我一直在考虑这样做：

<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">Blah</button>

有没有办法可以在CSS中定义一个包含所有这些类的单个类，然后定义按钮以获得单个类？

像：

.myclass {ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only}

<button class="myclass">Blah</button>

Answer 1

不，CSS中没有任何内容可以让您引用另一个规则集。

Answer 2

如果您使用LESS（http://lesscss.org/）

之类的东西，您可以做类似的事情

来自他们网站的例子：

.rounded_corners (@radius: 5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners(10px);
}

还有SASS（http://sass-lang.com/）和LessJS（http://github.com/cloudhead/less.js/tree/）

如果您不想使用这些库，那么仅使用CSS就不可能做这样的事情

Answer 3

很遗憾，CSS不允许这样的事情。 'CSS方式'是将所有相关的类放入元素的类属性中。

有一些工具可以让你以这种方式编写CSS（例如Less），但你仍然需要在'较短'的CSS上运行该工具来生成最终的CSS文件在您的网站上。

事实上，由于这些工具的工作方式，这些工具通常会最终导致您实际上拥有一个更大的 CSS文件。因此，即使它们可以使您的样式在开发时更容易使用，但如果您的目标是减少网站上的文件大小，那么它们不是最佳选择。

将多个CSS样式应用于元素

3 个答案: