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

Question

我有一个类似于以下的CSS类：

.foo {
  background-color: red;
}

接着我有一个用于列表的指定类:

.list1 li {
  background-color: tan;
}

能否将一个样式类设置为指向另一个样式类？就像这样：

.list1 li {
  .foo;
}

不太确定该如何表达 - 我只想让.list li的样式与我为.foo类定义的样式相同。

- user246114

---

可能是CSS类可以继承一个或多个其他类吗？的重复问题。 - Organic Advocate

Answer 1

你可以使用选择器分组：

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

- ChrisW

---

这并不是一个完整的答案，更像是“不行，但你可以尝试这个替代方案，可能符合你的需求，也可能不符合。” - user9057586

我只想让 .list li 样式与我为 .foo 类定义的样式相同。 - ChrisW

Answer 2

不行。你可以在“本地CSS”中使用多个选择器来达到最好的效果：

.foo, .list1 li {
   ...
}

否则，还有一些可以帮助解决这个问题的预处理器，比如SASS。

- RoToRa

Answer 3

你可能想了解一下CSS预处理器，例如SASS或LESS。你可以定义变量，这些变量可以在整个代码中使用。如果熟悉它，它会极大地加快你的编码速度。 http://sass-lang.com/ http://lesscss.org/ 使用SASS：

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

- Ghost Echo

Answer 4

不要使用那样的语法（不要将“class”（HTML术语）与“class selector”或“rule-set”混淆）。

你可以选择使用多个类、选择器分组或预处理。请参考这里了解更多信息。

- Quentin

Answer 5

不可以直接覆盖，但您可以使用不同的类名进行覆盖。

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

class ="list1 foo"

- Salil

Answer 6

据我所知，目前这是不可能实现的，但我希望未来会有这样的功能。我通常会将想要相似的内容复制粘贴到所需的选择器中，或者将选择器名称一个接一个地放在一起。

.foo,
.li,
.whatever
{styles}

也许其他人有不同的建议。

- Kyle

Answer 7

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

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

Original Answer翻译成"最初的回答"

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

- Frank Carnovale

---

这个解决方案不会覆盖已经定义的类。可以使用一些修复方法：https://stackoverflow.com/questions/5394366/does-addclass-in-jquery-override-any-existing-css-class-based-styles 但不幸的是，在我的情况下，它会导致大量的 CSS 更改... - Grigory Kislin

Answer 8

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

- Lars Mæhlum

Answer 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>

- dizad87

Answer 10

我正在为同样的问题苦苦挣扎。一切都是面向对象的，但CSS不是：定义3个容器（A/B/C）来定义边框/背景/悬停属性，再定义另外3个容器（X/Y/Z）来定义文本属性（颜色、字体、大小、粗细），然后你可以给HTML容器分配ID或类（如果它们总是相同的（E/F/G）。

现在你可以定义 .E{ .A .Z } .F{ .B .Z } .G{ .C .Y }

这种方法不可能实现的原因，以及现在无法“管理”层次结构（级联）的原因，就是为什么许多页面有成千上万行的CSS代码。如果能够在CSS定义中“继承”其他ID/类，那么这将大大减少。

只需在HTML和CSS中简单地定义结构（布局）即可。

我发现ServiceNow最糟糕的方法是使用CSS变量，元素没有文档记录，你需要自己找出来。每个元素都有3个Ifs...

- iPinky7