嵌套 CSS 类答案

【问题标题】：Nesting CSS classes嵌套 CSS 类
【发布时间】：2011-06-01 16:24:39
【问题描述】：

我可以执行以下操作吗？

.class1{some stuff}

.class2{class1;some more stuff}

【问题讨论】：

现场草稿 - github.com/w3c/csswg-drafts/tree/master/css-nesting-1

标签： css css-selectors

【解决方案1】：

更新 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 年规范提案未得到工作组的批准。

【讨论】：

这很有帮助。谢谢@import '../../styles/variables.css'; .download-page { & .download-page-hero { 背景颜色：#fff;背景图片：url('../../img/map-background.jpg');背景位置：中心中心；背景尺寸：封面；填充：7.5rem 0； } } 这些代码现在对我有用。
"规范提案未经工作组批准。"如何判断是否通过？
您可以在此问题 (github.com/w3c/csswg-drafts/issues/2701) 中看到它在票证接近尾声时被拒绝。
没有被拒绝；相反，它被移到了这里的正式拉取请求中：github.com/w3c/csswg-drafts/pull/2878
从那以后一直处于“探索”状态。 SASS 和 LESS 的存在正是因为工作组的进展如此缓慢。按照他们的速度，至少要到 2040 年才能在原生 CSS 中实现此功能。

【解决方案2】：

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

Sass

Sass 让 CSS 再次变得有趣。萨斯是一个 CSS3的扩展，添加嵌套规则、变量、混合、选择器继承，等等。已翻译使用格式良好的标准 CSS 命令行工具或网络框架插件。

或者

Less

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

示例：

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

【讨论】：

好的。谢谢。无论如何我都在使用 JQuery，所以我会使用它。我只是希望使用 css，因为如果我用 class2 动态添加另一个 html，例如，该类将附加到新的 html，而对于 Jquery，我必须在添加 html 后手动添加它
jQuery 跟它有什么关系？您是否建议在 jQuery 中使用自己的 css 预处理器？

【解决方案3】：

不是纯 CSS。最接近的等价物是：

.class1, .class2 {
    some stuff
}

.class2 {
    some more stuff
}

【讨论】：

谢谢。奇怪的是，有这么多人喜欢采用嵌套 CSS 之类的简单解决方案，并将其变成预处理的噩梦。如果我们在纯 CSS 中拥有这个简单的功能，那将是停止所有这些孩子们喜欢的额外预处理的另一个充分理由。

【解决方案4】：

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

【讨论】：

好的。谢谢。无论如何我都在使用 JQuery，所以我会使用它。我只是希望使用 css，因为如果我用 class2 动态添加另一个 html，例如，该类将附加到新的 html，而对于 Jquery，我必须在添加 html 后手动添加它。跨度>

【解决方案5】：

没有。

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

另请参阅我在CSS inheritance 上的文章。

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

试试这个...

给元素一个ID，还有一个类名。然后你可以在你的 CSS 中嵌套 #IDName.className。

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

【讨论】：

这有什么帮助？它不允许您扩展 CSS 规则，这就是问题所要问的，并且与使用多个类相比，将 ID 与类一起使用没有任何好处。