CSS变量如何在:nth-child()中设置不同值？-css教程-PHP中文网

css变量无法在:nth-child()中动态计算，因该伪类不支持变量或calc()中的n；正确做法是预设索引变量并手动映射，项数多时应改用js或构建工具。

css变量如何在:nth-child()中设置不同值？

直接用 CSS 变量无法在 `:nth-child()` 中动态赋值

因为 :nth-child() 是选择器，不是属性声明上下文，它本身不接受变量计算。你不能写 :nth-child(1) { --color: red; } 然后指望后续用 color: var(--color) 自动继承这个值——CSS 自定义属性的作用域是“声明它的选择器作用域”，不会跨选择器自动传递或叠加。

`:nth-child()` 配合 `var()` 必须提前定义好变量值

实际能用的方案是：先在父级或根级预设一组带索引的变量（比如 --item-color-1、--item-color-2），再用每个 :nth-child(n) 选择器手动映射到对应变量。这不是“动态计算”，而是静态映射。

常见错误现象：
– 写 :nth-child(n) { --c: hsl(calc(n * 30), 70%, 60%); } → 语法错误，calc() 里不允许用 n
– 期望 color: var(--color); 在不同子项中自动取不同值 → 实际只会取最近生效的 --color 声明，通常是最后一个匹配的选择器覆盖的值

正确做法：为每个位置单独声明变量，例如：

:root {
  --item-color-1: #f00;
  --item-color-2: #0f0;
  --item-color-3: #00f;
}
.item:nth-child(1) { --active-color: var(--item-color-1); }
.item:nth-child(2) { --active-color: var(--item-color-2); }
.item:nth-child(3) { --active-color: var(--item-color-3); }
.item { color: var(--active-color); }

如果项数固定且不多（≤10），这是最可靠的方式；项数多时建议改用 JS 动态设置 style 属性或生成 CSS 类
注意变量名必须合法（不能含空格、括号、特殊符号），n 不是可计算变量，只是伪类语法的一部分

用 `attr()` 或数据属性 + `content` 替代？不行

attr(data-color) 只能在 content 中用，不能用于颜色、尺寸等其他属性；而且它返回的是字符串，不能直接当颜色值用（color: attr(data-color); 无效）。所以这条路走不通。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

唯一可行的“类动态”方案是结合 HTML 数据属性和 JS：