CSS - 匹配的整體屬性值

Question

HTML

<div data-whatever='something cols-16 else'> 
</div> 

這工作：

將工作 - CSS

[data-whatever*='cols-1'] { 
    background: red; 
} 

它會找到div和使它紅色。

都不行 - CSS

[data-whatever='cols-16'] { 
    background: red; 
} 

它不會找到DIV，因爲還有其他的東西在那裏。

問題

與工作CSS的問題是，它既cols-16，cols-1以及與cols-1啓動任何其他相匹配。

問題

是否有可能找到一個屬性值，精確匹配？

Answer 1

爲目標類的cols-16（即使它看起來與其他類）

，而不是瞄準的cols-1級使用這樣的：

[data-whatever~='cols-16'] { 
    background: green; 
} 

您可以在此fiddle看到這方面的工作。

有關的詳細信息請參閱本post（後藤＃16 - X [富〜=「酒吧」]

的蒂爾達（〜）符號允許我們靶向具有 間隔分離的屬性價值列表

Answer 2

爲了確保它只匹配不依賴cols-16風格重寫cols-1風格（下）cols-1和不cols-16，你可以：

[data-whatever='cols-1'], 
[data-whatever^='cols-1 '], 
[data-whatever*='cols-1 '], 
[data-whatever$='cols-1'] { 
    background: red; 
} 

這符合data-whatever="cols-1"，data-whatever="... cols-1"，data-whatever="cols-1 ..."或data-whatever="... cols-1 ..."。

JSFiddle示例。

感謝aleation's answer：data-whatever~="cols-1"在一個選擇器中實現了與上述相同的功能。

-

無論如何你cols-16造型反正能覆蓋你cols-1造型，取決於它被呈現的順序：

[data-whatever*='cols-1'] { 
    background: red; 
} 

[data-whatever*='cols-16'] { 
    background: blue; 
} 

/*的cols-1將是紅色的。 cols-16將爲藍色*/

JSFiddle例如。

Answer 3

試試這個：

[data-whatever~='cols-1'] { 
    background: red; 
} 

它的工作對我來說，如果我不missunderstand你的問題

編輯：我只記得了〜=隨機，試了一下，貼吧。

但我只是用Google搜索了一下（我有好奇心，發現This，這是相當有趣）