CSS 将一个样式类指向另一个？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3037187/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Point one style class to another?
提问by user246114
I have a css class like:
我有一个 css 类，如：
.foo {
background-color: red;
}
then I have a class specified for a list:
然后我为列表指定了一个类：
.list1 li {
background-color: tan;
}
is it possible to set one style class to just point to another? Something like:
是否可以将一个样式类设置为仅指向另一个？就像是：
.list1 li {
.foo;
}
not sure how to articulate that - I just want the .list li style to be whatever I define for the .foo class.
不知道如何表达 - 我只希望 .list li 样式是我为 .foo 类定义的任何样式。
采纳答案by ChrisW
回答by RoToRa
回答by Quentin
Not with any syntax like that (and don't confuse a "class" (an HTML term) with a "class selector" or a "rule-set").
没有任何类似的语法（并且不要将“类”（HTML 术语）与“类选择器”或“规则集”混淆）。
Your options are multiple classes, grouping selectors or preprocessing.
您的选择是多个类、分组选择器或预处理。
回答by Ghost Echo
You might want to look into a CSS preprocessor such as SASS or LESS. You can define variables that can be used throughout your code. It greatly speeds up your coding when you're familiar with it.
您可能想要研究 CSS 预处理器，例如 SASS 或 LESS。您可以定义可在整个代码中使用的变量。当您熟悉它时，它会大大加快您的编码速度。
Using SASS:
使用SASS：
$darkred : #841c14;
.box {
background: $darkred;
}
回答by Kyle
Afaik, this isn't possible (yet) I hope it will be in the future. I always just copy+paste whatever I want to be the same into the desired selector or put the selector names one after another:
Afaik，这是不可能的（还）我希望它会在未来。我总是只是将我想要的任何内容复制+粘贴到所需的选择器中，或者一个接一个地放置选择器名称：
.foo,
.li,
.whatever
{styles}
Maybe someone else has another suggestion.
也许其他人有另一个建议。
回答by Salil
No you can't but you override it using naming differnt classes for example
不，你不能，但你可以使用命名不同的类来覆盖它，例如
.foo {
background-color: red;
}
.list1 li {
background-color: tan;
}
class ="list1 foo"
回答by Lars M?hlum
Inheritance is, as far as I know, not supported in CSS (2.1 at least)
据我所知，CSS 不支持继承（至少 2.1）
回答by Frank Carnovale
The above solutions aren't available if you don't have control over how 'foo' was defined.
如果您无法控制“foo”的定义方式，则上述解决方案不可用。
So, if a JQuery solution is acceptable, just apply the original class to all instances of the new class/context. In this case:
因此，如果 JQuery 解决方案可以接受，只需将原始类应用于新类/上下文的所有实例。在这种情况下：
$('.list li').addClass('foo')
回答by Grigory Kislin
I've a litte expand @Frank Carnovale solution (without css changing). After page loading:
我有一点点扩展@Frank Carnovale 解决方案（不更改 css）。页面加载后：
$(function () {
$('.list li').removeClass('old1 old2 ...')
$('.list li').toggleClass('foo1 foo2 ...')
}
See also Does addClass in JQuery override any existing css class based styles?
回答by dizad87
to help clarify what is meant by overriding, if you want .list1 li to carry all the styles of foo, but just want to change it's color to tan, i would do this:
为了帮助澄清覆盖的含义，如果您希望 .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>
