html - 是否可以在 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() 表示法)没有被定义用于除属性声明之外的任何东西，所以不，它们不能在选择器中使用。从它们的名字来看，这是有道理的，因为只有属性声明可以级联，选择器不能。来自spec :

A variable can be used in place of any part of a value in any property on an element. Variables can not be used as property names, selectors, or anything else besides property values. (Doing so usually produces invalid syntax, or else a value whose meaning has no connection to the variable.)