Html 为什么我的属性选择器不工作'；里面没有空格吗？

以下是关于

[attr~=value]

属性选择器的说明：

表示属性名为attr的元素，其值为 以空格分隔的单词列表，其中一个单词正好是value

如果

liquid

没有被空格分隔，那么它为什么工作

[数据蔬菜~=“液体”]{
颜色：红色；
}

我的食谱配料：意大利香肠

番茄
洋葱
大蒜
红辣椒
鸡肉
培根位
橄榄油
白葡萄酒

它不是用空格分隔的，而是：

以空格分隔的单词列表

这意味着一个单词列表，其中有空格，如果单独使用，则不需要空格，因为没有什么可分隔的

[数据蔬菜~=“液体”]{
颜色：红色；
}

这个
还有这个
还有这个
也是这一种
不是这个
不是这个
不是这个

单词列表中的单词之间有分隔符。

---

如果列表只包含一个单词，没有分隔符，这意味着属性（

数据蔬菜

，在本例中）可以有多个值，在一个字符串中使用空格来分隔值，如

数据蔬菜=“液体食物棒”

，它给出了三个值“液体”、“foo”和“bar”

选择器可用于匹配这些值中的任何一个，因此当匹配

[数据蔬菜==“液体”]

，

[数据蔬菜==“foo”]

或

[数据蔬菜==“bar”]

时，您将得到此元素。它说：“以空格分隔的单词列表”

---

这意味着它是一个列表，由空格分隔。但是列表只能有一项。因此，在这种情况下，不需要空格。

其中一个正好是值

您只有一个，因此当然没有空格分隔，也就是说使用多个空格，空格是分隔符。我投票结束这个问题，因为它与编程无关，更多关于对描述此特定功能的副本的误解，请在javascript控制台上尝试此操作：

“liquid”。拆分（“”）

@DarrenSweeney在本例中，需要关闭一半的SO问题。。。误读或误读规范是一个编程问题，因为如果你没有正确理解描述，你就无法正确编写程序，而描述并不总是琐碎的。我不确定它是否值得，但它肯定值得否决，依我看，因为这纯粹是因为未能正确阅读教程网站（包括示例）上选择器的简单描述。谢谢，本示例将其清除。使用

=

和

~=

来查看差异。@在上一个示例中，Temani实际上需要

[数据蔬菜*=“液体”]，[data蔬菜^=“液体”]{color:red；}

@yunzen为什么？我的意图是选择单词

liquid

是否存在，不管是什么情况。那么你不应该有文本

而不是这个在最后一个到
s@yunzen复制/过去应该受到指责吗？：）