是否可以在CSS3选择器中使用CSS vars？ [英] Is it possible to use CSS vars in CSS3 selectors?

问题描述

我正在尝试一些CSS vars的实验，我不能得到这个工作或找到任何文档。有没有人知道是否可以在CSS3选择器中使用CSS var？

I’m trying some experiments with CSS vars, and I couldn’t get this to work or find any documentation about it. Does anyone know if it’s possible to use a CSS var in a CSS3 selector?

我用下面的例子来解释我想做什么。

I made the following example to explain what I’m trying to do. This example is Chrome only.

http://jsfiddle.net/68Rrn/

: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

HTML

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

推荐答案

级联变量未定义， style属性值，所以没有，它们不能在选择器中使用。根据他们的名字，这是有道理的，因为只有属性声明可以级联，而不是选择器。从规范：

Cascading variables aren't defined for use with anything but style property values at the moment, so no, they cannot be used in selectors. Judging by their name, this makes sense, since only property declarations can cascade, not selectors. From the 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.)

这篇关于是否可以在CSS3选择器中使用CSS vars？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！