Goal:成功地将变量作为参数传递给第n个子项.在下面的例子中，第三行应该变成绿色.
Problem:当前该参数作为变量被忽略.
这有可能吗？如果是，我需要改变什么？
Example Code:
:root {
--n: 3;
}
div p:nth-child(var(--n)) {
background: green;
padding: 10px;
}<div>
<p>a</p>
<p>b</p>
<p>c</p>
</div>Goal:成功地将变量作为参数传递给第n个子项.在下面的例子中，第三行应该变成绿色.
Problem:当前该参数作为变量被忽略.
这有可能吗？如果是，我需要改变什么？
Example Code:
:root {
--n: 3;
}
div p:nth-child(var(--n)) {
background: green;
padding: 10px;
}<div>
<p>a</p>
<p>b</p>
<p>c</p>
</div>唯一可以使用CSS custom properties的地方(这是not个"变量"！)是在declarations，在:之后.这也意味着不幸的是，您不能在 Select 器或媒体查询中使用这些自定义属性.
这也是为什么人们真的应该停止称它们为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>