css - 嵌套 CSS 类

Question

我可以做类似下面的事情吗？

.class1{some stuff}

.class2{class1;some more stuff}

Answer 1

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

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

更新 3 (2022):我们现在有了 W3C 第一份公共(public)工作草案 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;
  }
}