嵌套 CSS 类

我可以做下面这样的事情吗？

.class1{some stuff}


.class2{class1;some more stuff}
277453 次浏览
小开
最佳答案

用普通的 CSS 是不可能的，但是你可以使用这样的东西:

Sass 让 CSS 再次变得有趣 扩展 CSS3，添加嵌套 规则，变量，混合，选择器 遗产，还有更多，这是翻译过来的 到格式良好的标准 CSS 命令行工具或 Web 框架插件。

或者

而不是构造长选择器 用于指定继承的名称，请在 你可以简单地在里面嵌套选择器 其他选择者。这使得 继承清单和样式表 更短。

例如:

#header {
color: red;
a {
font-weight: bold;
text-decoration: none;
}
}
小开

不能直接使用。但是您可以使用诸如 更少之类的扩展来帮助您实现同样的目标。

小开

不能使用纯 CSS。最接近的等价物是:

.class1, .class2 {
some stuff
}


.class2 {
some more stuff
}
小开

没有。

您可以在单个元素上使用 分组选择器分组选择器和/或多个类，或者您可以使用模板语言并用软件处理它来编写 CSS。

请参阅我在 CSS 继承上的文章。

小开

我不相信这是可能的。您可以将 class1添加到所有也具有 class2的元素中。如果手动完成这项工作不实际，可以使用 JavaScript 自动完成(使用 jQuery 相当容易)。

小开

更新1: 有一个针对 CSS 级别3嵌套的 CSS3规范，目前是一个草案。 Https://tabatkins.github.io/specs/css-nesting/

更新2(2019) : 我们现在有一个 CSSWG 编辑草稿 Https://drafts.csswg.org/css-nesting-1/

更新3(2022) : 我们现在有一个 W3C 第一个公共工作草案 < a href = “ https://www.w3.org/TR/css-nesting-1/”rel = “ nofollow noReferrer”> https://www.w3.org/tr/css-nesting-1/

如果获得批准，语法将如下所示:

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;
}
}
小开

试试这个..。

给元素一个 ID 和一个类 Name，然后可以在 CSS 中嵌套 # IDName.className。

有个更好的解释 Https://css-tricks.com/multiple-class-id-selectors/

小开

如果不能等到本机 CSS 嵌套正式运行，可以使用容器查询来完成。到目前为止，Chrome & Edge 105 + 和 Safari 16 + 都支持它(部分)。

它看起来像这样:

.class1 {
container-type: inline-size;
container-name: my-container;
// other style rules
}


@container my-container (min-width: 0px) {
.class2 {
// some style rules
}
}

详情请参阅 给你。


提交答案