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，这是相当有趣）