問題描述

我正在嘗試使用 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模板網！