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

【问题标题】：Point one style class to another?将一个样式类指向另一个样式类？
【发布时间】：2011-03-03 12:07:42
【问题描述】：

我有一个类似的 CSS 类：

.foo {
  background-color: red;
}

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

.list1 li {
  background-color: tan;
}

是否可以将一个样式类设置为指向另一个样式类？比如：

.list1 li {
  .foo;
}

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

【问题讨论】：

Can a CSS class inherit one or more other classes?的可能重复

标签： css

【解决方案1】：

你可以使用selector grouping:

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

【讨论】：

这不是真正的答案。这更像是“不，但你可以这样做，这可能是也可能不是你想要的”。
"我只希望 .list li 样式是我为 .foo 类定义的任何样式。"

【解决方案2】：

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

.foo, .list1 li {
   ...
}

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

【讨论】：

【解决方案3】：

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

您的选择是multiple classes, grouping selectors or preprocessing。

【讨论】：

【解决方案4】：

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

http://sass-lang.com/

http://lesscss.org/

使用 SASS：

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

【讨论】：

【解决方案5】：

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

.foo,
.li,
.whatever
{styles}

也许其他人有其他建议。

【讨论】：

【解决方案6】：

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

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

class ="list1 foo"

【讨论】：

【解决方案7】：

如果您无法控制“foo”的定义方式，则上述解决方案不可用。

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

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

【讨论】：

此解决方案不会覆盖已定义的类。一些可用的修复：stackoverflow.com/questions/5394366/… 但不幸的是，它会导致我的情况发生重大的 css 变化......

【解决方案8】：

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

【讨论】：

【解决方案9】：

为了帮助澄清覆盖的含义，如果您希望 .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>

【讨论】：

【解决方案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?

【讨论】：