CSS选择器说明：|=vs^=

:

[foo |='bar']

“选择具有以“bar”开头的[foo]属性的所有元素

和

[foo^='bar']

“选择[foo]属性值以“bar”开头的每个元素

在我的应用程序中，我有ID为“Input-123456”的输入，等等

用

input[id^=“input-”]

选择它们会起作用，而

input[id |=“input-”]

不会返回任何结果

那么有什么区别呢？

与“真实”参考（）有什么区别：

E[foo^=“bar”]

E元素，其“foo”属性值正好以字符串“bar”开头

E[foo |=“en”]

E元素，其“foo”属性具有以“en”开头（从左起）的以连字符分隔的值列表

当出现不一致时，始终使用实际标准。我倾向于避开W3学校，因为它们的质量控制有时不太好。

---

请参见|=部分，区别在于破折号分隔的列表。

这就是为什么我们不喜欢w3schools…@JosephMarikle，下面的答案无论如何都不好。它同样令人困惑和困惑。此外，在w3school准备就绪的情况下，很难使用非实用性的规范。工作时很方便，完全同意。W3C很难导航，但它是（或应该是）标准。MDN（附带一句）也不错，但W3C学校似乎总是让人失望。W3C确实是一个好去处，尽管我偶尔会去css-tricks.net，因为我喜欢他们的例子。明白了，谢谢！我发现w3schools对于简单的事情来说是一个很好的参考，但是我注意到越来越多的微妙之处，它们会像这样出错。有点烦人。你能帮我更好地理解它吗。

[foo^=“bar”]

将选择具有以下属性声明的元素：

foo=“bar”

，而

foo |=“bar”

将不选择元素，因为它要求属性值中出现连字符。因此，对于要由这两个选择器匹配的元素，其属性声明可以如下所示：

foo=“bar-”

。我说得对吗？如果我的理解是错误的，而我的理解是错误的，那么你的答案就缺乏正确性，因为我上面的陈述与你的答案并不矛盾。你能为破折号分隔列表提供一个定义吗？例如，空字符串是否被视为破折号分隔列表？请提供破折号分隔列表的定义？例如，空字符串是否被视为破折号分隔列表？