是否可以在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()符号)未定义用于除属性声明之外的任何内容,因此不能在选择器中使用它们.从它们的名称来看,这是有道理的,因为只有属性声明才能级联,而不是选择器.从规格:

可以使用变量代替元素上任何属性中值的任何部分.变量不能用作属性名称,选择器或属性值之外的任何其他内容.(这样做通常会产生无效的语法,或者其含义与变量无关的值.)