css - 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。

问题

是否可以找到一个属性值，完全匹配？

score 2 · Accepted Answer

尝试这个：

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

如果我没有误解你的问题，它对我有用

编辑：我只是随机记住了〜=，尝试了一下，然后粘贴了。

但我只是用谷歌搜索了一下（我很好奇发现了这个，这很有趣）

score 2 · Accepted Answer

为了定位 cols-16 类（即使它与其他类一起出现）

而不是针对 cols-1 类使用这个：

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

有关更多信息，请参阅这篇文章（转到 #16。- X[foo~="bar"]

波浪号 (~) 符号允许我们定位一个属性，该属性具有一个以空格分隔的值列表。

score 0 · Accepted Answer

为了确保它只匹配cols-1而不依赖 cols-16于cols-16覆盖样式的cols-1样式（如下），您可以：

[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 的回答：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示例。

3 回答 3