CSS-匹配整个属性值

HTML

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

它将找到div并将其变为红色

将不起作用-CSS

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

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

它找不到div，因为里面还有其他东西

问题

工作CSS的问题在于，它既匹配

cols-16

，

cols-1

，也匹配以

cols-1

开头的任何其他CSS

问题

---

是否可以找到一个属性值，精确匹配？

要确保它只匹配

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 which=“cols-1”

，

data which=“…cols-1”

，

data which=“cols-1…”

或

data which=“…cols-1…”

例如

感谢：

data which~=“cols-1”

在一个选择器中实现了与上述相同的功能

--

无论如何，您的

cols-16

样式可能会覆盖您的

cols-1

样式，具体取决于呈现的顺序：

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

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

/*cols-1将是红色的。cols-16将是蓝色的*/

---

示例。

为了确保它只匹配

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 which=“cols-1”

，

data which=“…cols-1”

，

data which=“cols-1…”

或

data which=“…cols-1…”

例如

感谢：

data which~=“cols-1”

在一个选择器中实现了与上述相同的功能

--

无论如何，您的

cols-16

样式可能会覆盖您的

cols-1

样式，具体取决于呈现的顺序：

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

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

/*cols-1将是红色的。cols-16将是蓝色的*/

示例。

试试这个：

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

如果我不理解你的问题，我会成功的

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

但我只是在谷歌上搜索了一下（我很好奇，发现它很有趣）

试试这个：

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

如果我不理解你的问题，我会成功的

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

---

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

以cols-16类为目标（即使它出现在其他类中）

而不是针对cols-1类使用以下方法：

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

你可以看到这个在这里面起作用

有关更多信息，请参见此（Goto#16.-X[foo~=“bar”]

tilda（~）符号允许我们将具有 以空格分隔的值列表

---

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

而不是针对cols-1类使用以下方法：

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

你可以看到这个在这里面起作用

有关更多信息，请参见此（Goto#16.-X[foo~=“bar”]

tilda（~）符号允许我们将具有 以空格分隔的值列表

---

啊，我没有意识到，

~=

！想想我一直在通过组合

=

，

^=

，

*=

和

$=

使我的生活变得困难！啊，我没有意识到，

~=

！想想我一直在通过组合

=

，

^=

，

*

使我的生活变得困难e> 一直以来，

$=

太棒了！正是我想要的。太棒了！正是我想要的。