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

问题描述

我正在尝试使用 CSS 变量进行一些实验，但我无法让它工作或找到任何有关它的文档.有谁知道是否可以在 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?

我制作了以下示例来解释我正在尝试做的事情.此示例仅适用于 Chrome.

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

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

推荐答案

级联变量(即 var() 表示法)没有被定义用于除属性声明之外的任何东西，所以不，它们不能在选择器中使用.从它们的名字来看，这是有道理的，因为只有属性声明可以级联，而不是选择器.来自 规范:

Cascading variables (i.e. the var() notation) aren't defined for use with anything but property declarations, 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 变量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！