嵌套CSS类

Question

我可以执行以下操作吗？

.class1{some stuff}

.class2{class1;some more stuff}

Answer 1

使用vanilla CSS无法实现。但是你可以使用类似的东西：

• Sass

  

Sass让CSS再次变得有趣。萨斯是一个   CSS3的扩展，添加嵌套   规则，变量，mixins，selector   继承等等。它被翻译了   格式良好的标准CSS使用   命令行工具或   web-framework插件。

或者

• Less

  

而不是构建长选择器   在Less中指定继承的名称   你可以简单地在里面嵌套选择器   其他选择者。这使得   继承清晰和样式表   短。

示例：

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

Answer 2

不是纯CSS。最接近的是：

.class1, .class2 {
    some stuff
}

.class2 {
    some more stuff
}

Answer 3

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

更新2（2019）：我们现在有CSSWG草案 https://drafts.csswg.org/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;
  }
}

状态： 工作组尚未批准2015年原始规范提案。

Answer 4

不直接。但是您可以使用LESS等扩展来帮助您实现相同的目标。

Answer 5

没有

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

另见我关于CSS inheritance的文章。

Answer 6

试试这个......

为元素提供ID，以及类名。然后，您可以将#IDName.className嵌套在CSS中。

这是一个更好的解释 https://css-tricks.com/multiple-class-id-selectors/

Answer 7

您可以使用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');
};

Answer 8

我不相信这是可能的。您可以将class1添加到也包含class2的所有元素。如果手动操作不实用，可以使用JavaScript自动完成（使用jQuery很容易）。