Question

我有一个css类，如：

.foo {
  background-color: red;
}

然后我有一个为列表指定的类：

.list1 li {
  background-color: tan;
}

是否可以将一个样式类设置为指向另一个？类似的东西：

.list1 li {
  .foo;
}

不确定如何表达 - 我只是希望.list li样式是我为.foo类定义的。

Answer 1

您可以使用selector grouping：

.foo, .list1 li { 
  background-color: red; 
}

Answer 2

没有。使用“原生CSS”最好的方法是使用多重选择器：

.foo, .list1 li {
   ...
}

否则有预处理器可以帮助解决此问题，例如SASS。

Answer 3

没有任何类似的语法（并且不要将“类”（HTML术语）与“类选择器”或“规则集”混淆。）

您的选项为multiple classes, grouping selectors or preprocessing。

Answer 4

您可能希望查看CSS预处理器，例如SASS或LESS。您可以定义可在整个代码中使用的变量。当您熟悉它时，它可以大大加快您的编码速度。

http://sass-lang.com/

http://lesscss.org/

使用SASS：

$darkred : #841c14;
.box { 
    background: $darkred;
}

Answer 5

Afaik，这是不可能的（还）我希望将来会这样。我总是只是将我想要的任何内容复制+粘贴到所需的选择器中，或者一个接一个地放置选择器名称：

.foo,
.li,
.whatever
{styles}

也许其他人有另一个建议。

Answer 6

据我所知，继承是CSS不支持的（至少2.1）

Answer 7

不，你不能但是你可以使用命名不同的类来覆盖它，例如

.foo {
  background-color: red;
}
.list1 li {
   background-color: tan;
}

class ="list1 foo"

Answer 8

帮助澄清覆盖的含义，如果你想.list1 li来携带foo的所有样式，但只想将它的颜色改为棕褐色，我会这样做：

<span class = "foo">
  <span class = "list1"><!--or whatever name you have for your new style-->
    TEXT WITH INHERITED STYLE GOES HERE
  </span>
</span>

Answer 9

如果您无法控制'foo'的定义，上述解决方案将不可用。

因此，如果可以接受JQuery解决方案，则只需将原始类应用于新类/上下文的所有实例。在这种情况下：

$('.list li').addClass('foo')

Answer 10

我有一个小扩展@Frank Carnovale解决方案（无需更改CSS）。页面加载后：

$(function () {
   $('.list li').removeClass('old1 old2 ...')
   $('.list li').toggleClass('foo1 foo2 ...')
}

另请参阅Does addClass in JQuery override any existing css class based styles?

将一个样式类指向另一个？

10 个答案: