嵌套 CSS 类

Question

我可以执行以下操作吗？

 .class1{some stuff}

.class2{class1;some more stuff}

原文由 kralco626 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

香草 CSS 不可能。但是，您可以使用类似的东西：

• 萨斯

Sass 让 CSS 再次变得有趣。 Sass 是 CSS3 的扩展，添加了嵌套规则、变量、mixin、选择器继承等。使用命令行工具或网络框架插件将其转换为格式良好的标准 CSS。

或者

• 较少的

在 Less 中，您可以简单地将选择器嵌套在其他选择器中，而不是构造长选择器名称来指定继承。这使得继承清晰并且样式表更短。

例子：

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

原文由 Sarfraz 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

更新 1： 有 CSS 3 级嵌套的 CSS3 规范。目前是草稿。 https://tabatkins.github.io/specs/css-nesting/

更新 2（2019 年）： 我们现在有 CSSWG 编辑草案 https ://drafts.csswg.org/css-nesting-1/

更新 3（2022 年）： 我们现在有了 W3C 第一份公共工作草案 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;
  }
}

原文由 etoxin 发布，翻译遵循 CC BY-SA 4.0 许可协议