如何为HTML中第N层嵌套的区块应用CSS规则？

嘿，这个需求确实挺常见的——想给不同嵌套层级的元素自动切换样式，但可惜CSS原生并没有提供nth-nested()这种直接的选择器。不过我们有两种靠谱的解决办法，一起来看看：

方法一：纯CSS变量实现（无需JS，现代浏览器支持） #

这个方法利用CSS自定义属性的继承特性，通过在嵌套时切换颜色变量来自动实现交替效果：

/* 初始设置：第一层嵌套的文本颜色为红色 */
body {
  --current-text-color: red;
  --next-text-color: blue;
}

/* 每进入一个div嵌套，就交换当前和下一个颜色变量 */
div {
  --temp-color: var(--current-text-color);
  --current-text-color: var(--next-text-color);
  --next-text-color: var(--temp-color);
}

/* 给所有p元素应用当前层级的文本颜色 */
p {
  color: var(--current-text-color);
}

原理说明 #

每一层div都会继承父级的颜色变量，然后交换两个变量的值：

• 第一层div里的p会使用初始的--current-text-color（红色）
• 第二层div继承后交换变量，p就会变成蓝色
• 第三层再交换，回到红色，以此类推，无限嵌套都能生效

注意：这个方法依赖CSS自定义属性的继承和计算，需要现代浏览器支持（Chrome、Firefox、Edge等都没问题，IE不支持）。

方法二：JavaScript辅助设置层级标识（兼容性更好，更灵活） #

如果需要兼容旧浏览器，或者想要更直观的样式控制，用JS给每个嵌套层级的div添加标识是更稳妥的选择，完全解决你之前遇到的“层级超过预设就失效”的问题。

步骤1：用JS给每个div设置嵌套层级 #

我们写一个递归函数，自动给每个div添加层级类名和CSS变量：

// 递归函数：给目标div设置层级变量和类名，再处理子div
function setNestLevel(element, level) {
  // 设置CSS变量，方便CSS直接使用层级数值
  element.style.setProperty('--nest-level', level);
  // 添加类名，比如nest-level-1、nest-level-2
  element.classList.add(`nest-level-${level}`);
  
  // 遍历当前div的直接子div，递归设置下一层级
  const childDivs = element.querySelectorAll(':scope > div');
  childDivs.forEach(child => {
    setNestLevel(child, level + 1);
  });
}

// 启动函数：从body下的第一个div开始，层级设为1
const firstDiv = document.body.querySelector('div');
if (firstDiv) {
  setNestLevel(firstDiv, 1);
}

步骤2：用CSS根据层级设置样式 #

现在你有两种简洁的写法可选：

方式A：使用类名（兼容性最优）

/* 奇数层级（1、3、5...）的p设为红色 */
.nest-level-1 p,
.nest-level-3 p,
.nest-level-5 p {
  color: red;
}

/* 偶数层级（2、4、6...）的p设为蓝色 */
.nest-level-2 p,
.nest-level-4 p,
.nest-level-6 p {
  color: blue;
}

方式B：使用CSS变量（写法更简洁）

现代浏览器支持直接用CSS变量做奇偶判断，一行代码搞定：

div p {
  color: calc(var(--nest-level) % 2 == 1 ? red : blue);
}

内容来源于stack exchange