是否可选择第n代后代元素？基于DOM嵌套层级的CSS选择问询

嘿，这个需求我之前也碰到过！完全不用给每个嵌套层手动加类，咱们可以通过CSS的变量递推或者层级选择器来实现类似nth-child的交替逻辑，下面给你两种实用的方案：

方案一：递归CSS变量（最灵活，自动适配任意嵌套深度） #

这个方法用CSS变量记录当前嵌套层级，子元素自动继承并递增层级值，再通过奇偶判断切换颜色，不管嵌套多少层都能自动交替：

/* 初始化根变量：层级从1开始，定义两种交替颜色 */
:root {
  --current-level: 1;
  --color-odd: #ffd6d6; /* 奇数层颜色 */
  --color-even: #d6ffd6; /* 偶数层颜色 */
}

/* 所有元素根据当前层级的奇偶性应用背景色 */
* {
  /* 用calc判断奇偶：奇数返回1，偶数返回0，再对应取颜色 */
  background-color: calc(
    (var(--current-level) % 2) * var(--color-odd) + 
    ((1 - var(--current-level) % 2)) * var(--color-even)
  );
  padding: 8px; /* 加个内边距方便看层级 */
}

/* 子元素的层级比父元素+1，自动继承递推 */
* > * {
  --current-level: calc(var(--current-level) + 1);
}

效果演示的HTML结构 #

<body>
  <div>第1层（粉色）
    <div>第2层（绿色）
      <div>第3层（粉色）
        <div>第4层（绿色）
          <p>第5层（粉色）</p>
        </div>
      </div>
    </div>
  </div>
</body>

方案二：手动层级选择器（适合固定嵌套深度的场景） #

如果你的嵌套深度是固定的（比如最多3-4层），也可以直接用子选择器逐层指定，结合nth-child(n)匹配该层级下的所有元素：

/* 第1层：body的直接子元素 */
body > :nth-child(n) {
  background-color: #ffd6d6;
}

/* 第2层：第1层元素的直接子元素 */
body > :nth-child(n) > :nth-child(n) {
  background-color: #d6ffd6;
}

/* 第3层：第2层元素的直接子元素 */
body > :nth-child(n) > :nth-child(n) > :nth-child(n) {
  background-color: #ffd6d6;
}

/* 继续往下加即可，按需扩展 */

注意事项 #

1. 如果不想让所有元素都生效，可以把*换成你需要的元素类型（比如div、ul），避免影响全局样式；
2. 要是有个别元素需要跳过交替，可以给它加个类，比如.no-alternate，然后重置--current-level或者直接覆盖背景色：

   .no-alternate {
     --current-level: initial;
     background-color: transparent !important;
   }
   

3. 方案一的CSS变量方法需要浏览器支持CSS自定义属性和calc，现代浏览器都没问题，兼容性很好。

内容的提问来源于stack exchange，提问作者Musixauce3000