nth-nested-child的CSS选择器[重复]答案

【问题标题】：CSS selector for nth-nested-child [duplicate]nth-nested-child的CSS选择器[重复]
【发布时间】：2015-03-09 02:02:25
【问题描述】：

我正在为一个带有嵌套 cmets 的论坛编写 CSS 主题。我希望顶级 cmets 有白色背景，二级 cmets 有灰色背景，三级白色，四级灰色，五级白色等。

此样式表适用于前五个级别：

#comments > .comment { background-color: white }
#comments > .comment > .comment { background-color: grey }
#comments > .comment > .comment > .comment { background-color: white }
#comments > .comment > .comment > .comment > .comment { background-color: grey }
#comments > .comment > .comment > .comment > .comment > .comment { background-color: white }

如何编写以便无论嵌套深度如何都能始终工作？

【问题讨论】：

你能展示一些有代表性的 HTML，并展示最终结果应该是什么吗？因为您要求我们为我们看不到的东西（实际上是猜测）找到一个简洁的选择器。
似乎很不言自明，@David。背景颜色随每个嵌套级别交替变化。
@BoltClock：在某种程度上我同意，很高兴看到结构作为参考（如果没有别的）；这有利于我们自己的示范建设。此外，有时，该结构可能会定义/显示创建选择器的替代选择。
我不太确定为什么这个问题会被否决。这是一个很好的问题。虽然我认为答案是不可能的。以前我找不到它。
@James Montagne：这个问题以前肯定有人问过，我记得我看到过很多不同的措辞。但你知道吗 - 我也找不到任何以前的问题。

标签： css css-selectors

【解决方案1】：

我认为你不能，但你可以稍微减少代码量。首先，一定要使用child(>)，否则评论中的评论也会匹配到#comment .comment。

其次，您可以为 cmets 定义基本样式，并且只为第二个第四层（如果您需要第六层等）添加特定的覆盖。

通过这种方式，您可以为实际期望的尽可能多的级别定义“覆盖”。如果 cmets 嵌套得更深，它们仍然是样式但具有基本样式。

/* Base, applies to all comments */
#comments .comment { 
  background-color: white; 
}

/* Overrides for specific levels of nesting */
#comments > .comment > .comment,
#comments > .comment > .comment > .comment > .comment { 
  background-color: grey 
}

【讨论】：

直接子选择器并不是真正需要的，因为后者，更具体的选择器将覆盖之前的选择器。尽管您更新了使用基本样式的示例，但它确实很重要。
是的，我忘了 >，但我不会写一个 CSS 来支持 50 级“以防万一”。
好吧，那就不要了。我不认为拥有 50 个级别是不现实的，即使你有，“基础”样式对于更深的级别来说可能已经足够了。另请注意，我用逗号分隔选择器，以便包含一个额外的级别，您只需将该选择器添加到列表中，而不是整个样式。为此，CSS 中没有“循环”。也许在 SCSS 中有，但我不这么认为，而且它仍然不会无穷无尽。