在伪选择器中使用CSS变量

Question

我一直试图在伪选择器上使用CSS变量，但没有取得太大的成功。 这是我的代码：

ul {
  --red-items: 3;
  --main-color: red;
}

ul li {
  color: blue;
}

ul li:nth-of-type(var(--red-items)) {
  color: red;
}

/* THIS WORKS */
/* ul li:nth-of-type(3) {
  color: var(--main-color);
} */

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

如果我将变量替换为实际值，则说我的代码可以正常工作，例如“ 3”（如下所示）。我不确定这是否是预期的行为，或者是否有解决方法

ul li:nth-of-type(3)

PS：这也是一个代码笔供参考 https://codepen.io/talentedunicorn/pen/JBQNaX