嵌套 CSS 类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4564916/
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
Nesting CSS classes
提问by kralco626
Can I do something like the following?
我可以执行以下操作吗？
.class1{some stuff}
.class2{class1;some more stuff}
回答by Sarfraz
Not possible with vanilla CSS. However you can use something like:
无法使用 vanilla CSS。但是，您可以使用以下内容：
Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
Sass 再次让 CSS 变得有趣。Sass 是 CSS3 的扩展，添加了嵌套规则、变量、mixin、选择器继承等。使用命令行工具或网络框架插件将其转换为格式良好的标准 CSS。
Or
或者
Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.
在 Less 中，您可以简单地将选择器嵌套在其他选择器中，而不是构造长选择器名称来指定继承。这使得继承清晰，样式表更短。
Example:
例子：
#header {
color: red;
a {
font-weight: bold;
text-decoration: none;
}
}
回答by etoxin
Update 1:There is a CSS3 spec for CSS level 3 nesting. It's currently a draft. https://tabatkins.github.io/specs/css-nesting/
更新 1：有一个 CSS3 规范用于 CSS 级别 3 嵌套。目前是草稿。 https://tabatkins.github.io/specs/css-nesting/
Update 2 (2019):We now have a CSSWG draft https://drafts.csswg.org/css-nesting-1/
更新 2（2019）：我们现在有一个 CSSWG 草案 https://drafts.csswg.org/css-nesting-1/
If approved, the syntax would look like this:
如果获得批准，语法将如下所示：
table.colortable {
& td {
text-align:center;
&.c { text-transform:uppercase }
&:first-child, &:first-child + td { border:1px solid black }
}
& th {
text-align:center;
background:black;
color:white;
}
}
.foo {
color: red;
@nest & > .bar {
color: blue;
}
}
.foo {
color: red;
@nest .parent & {
color: blue;
}
}
Status:The original 2015 spec proposal was not approved by the Working Group.
状态：最初的 2015 规范提案没有得到工作组的批准。
回答by cdhowie
Not with pure CSS. The closest equivalent is this:
不是纯 CSS。最接近的等价物是这样的：
.class1, .class2 {
some stuff
}
.class2 {
some more stuff
}
回答by RabidFire
回答by Quentin
No.
不。
You can use grouping selectorsand/or multiple classes on a single element, or you can use a template language and process it with software to write your CSS.
您可以在单个元素上使用分组选择器和/或多个类，或者您可以使用模板语言并使用软件对其进行处理以编写 CSS。
See also my article on CSS inheritance.
另请参阅我关于CSS 继承的文章。
回答by Kyle
I do not believe this is possible. You could add class1to all elements which also have class2. If this is not practical to do manually, you could do it automatically with JavaScript (fairly easy to do with jQuery).
我不相信这是可能的。您可以添加class1到所有也有class2. 如果手动操作不切实际，您可以使用 JavaScript 自动完成（使用 jQuery 相当容易）。
回答by Oz The Tech Guy
Try this...
尝试这个...
Give the element an ID, and also a class Name. Then you can nest the #IDName.className in your CSS.
给元素一个 ID，还有一个类名。然后您可以在 CSS 中嵌套 #IDName.className。
Here's a better explanation https://css-tricks.com/multiple-class-id-selectors/
这是一个更好的解释 https://css-tricks.com/multiple-class-id-selectors/
回答by yairniz
You can do it using Javascript:
您可以使用 Javascript 来做到这一点：
static generateStyle = (parentSelector, allCss) => {
const reg = /(.+?)\s?\{\s?(.+?)\s?\}+/g;
const matches = allCss.match(reg);
const styles = [];
for (let i = 0; i < matches.length; i++) {
const cssDecleration = matches[ i ];
if (cssDecleration.indexOf('@media') === -1) {
styles.push(`${ parentSelector } ${ cssDecleration }`);
}
else {
const mediaPos = cssDecleration.indexOf('{');
if (mediaPos === -1) {
continue;
}
const mediaQuery = cssDecleration.substring(0, mediaPos);
const rest = cssDecleration.substring(mediaPos);
const restPlaced = MicroServiceData.generateStyle(parentSelector, rest);
styles.push(`${ mediaQuery } ${ restPlaced }`);
}
}
return styles.join('\n');
};
