css - 如何在第 nth-child 中正确传递 CSS 变量？

Question

目标:成功将变量作为参数传递给第 nth-child。在下面的示例中，第三行应变为绿色。

问题:目前该参数作为变量被忽略。

问题:这可能吗？如果是，我必须更改什么？

示例代码:

:root {
  --n: 3;
}
div p:nth-child(var(--n)) {
  background: green;
  padding: 10px;
}

<div>
  <p>a</p>
  <p>b</p>
  <p>c</p>
</div>

Answer 1

唯一可以使用 CSS 自定义属性(不是“变量”!)的地方是在 声明 中，在 :。这也意味着很遗憾，您不能在选择器或媒体查询中使用这些自定义属性。

这也是人们真的应该停止称它们为 CSS“变量”的原因。

但是，您可以使用 Javascript 操作样式:

const dynamicStyles = document.getElementById('dynamicStyles');

const n = getComputedStyle(document.documentElement).getPropertyValue('--n');

dynamicStyles.textContent = `
div p:nth-child(${n}) {
  background: green;
  padding: 10px;
}
`;

:root {
  --n: 3;
}

<style id="dynamicStyles"></style>
<div>
  <p>a</p>
  <p>b</p>
  <p>c</p>
</div>