嵌套CSS类

Question

我可以做以下的事情吗？

.class1{some stuff}

.class2{class1;some more stuff}

Answer 1

使用vanilla CSS是不可能的.但是你可以使用类似的东西:

• 萨斯

Sass让CSS再次变得有趣.Sass是CSS3的扩展,添加了嵌套规则,变量,mixins,选择器继承等等.它使用命令行工具或web框架插件转换为格式良好的标准CSS.

要么

• 减

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

例:

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

Answer 2

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

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

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

现状:工作组未批准规范提案.

Answer 3

不是纯CSS.最接近的是这个:

.class1, .class2 {
    some stuff
}

.class2 {
    some more stuff
}