是否可以在 CSS3 选择器中使用 CSS 变量？

Question

我正在尝试使用 CSS 变量进行一些实验，但我无法使其工作或找到任何有关它的文档。有谁知道是否可以在 CSS3 选择器中使用 CSS var？

我做了以下例子来解释我想要做的事情。 此示例仅适用于 Chrome。

JSFIDDLE

http://jsfiddle.net/68Rrn/

CSS

:root {
    -webkit-var-count: 5; /* define my var! */
}

li {
    width:100px;
    height:100px;
    background-color:blue;
    display:inline-block;
    list-style:none;
}


ul li:nth-child(4) {
    background-color:red;
}

ul li:nth-child(-webkit-var(count)) { /* I can't get this working, is it even supported? I'm trying to target the 5th element with my var. */
    background-color:black;
}

HTML

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Answer 1

级联变量（即

var()

表示法）未定义用于除属性声明之外的任何内容，因此它们不能在选择器中使用。从它们的名字来看，这是有道理的，因为只有属性声明可以级联，而选择器则不能。来自规格：

变量可以用来代替元素上任何属性中值的任何部分。变量不能用作属性名称、选择器或除属性值之外的任何其他内容。 （这样做通常会产生无效语法，或者产生含义与变量没有联系的值。）

Answer 2

使用网格布局可以达到您想要的结果。

虽然我们无法使用包含自定义属性（CSS 变量）的选择器来定位特定元素，但我们可以使用该自定义属性来定位元素的网格位置，然后用不同样式的伪元素屏蔽或覆盖它。

这是一个基于你原来的小提琴......

https://jsfiddle.net/6jnryk20/

CSS

:root {
  --count: 5;
}

ul {
  display: grid;
  justify-content: start;
}

li {
  width: 100px;
  height: 100px;
  background-color: blue;
  list-style: none;
  grid-row: 1;
  grid-column: var(--i);
}


li:nth-child(4) {
  background-color: red;
}

ul::after {
  content: '';
  width: 100px;
  height: 100px;
  background-color: black;
  grid-row: 1;
  grid-column: var(--count);
}

HTML

<ul>
  <li style="--i: 1;"></li>
  <li style="--i: 2;"></li>
  <li style="--i: 3;"></li>
  <li style="--i: 4;"></li>
  <li style="--i: 5;"></li>
</ul>