CSS 选择器说明：|= vs ^= [重复]答案

【问题标题】：CSS Selector Clarification: |= vs ^= [duplicate]CSS 选择器说明：|= vs ^= [重复]
【发布时间】：2016-05-04 03:41:28
【问题描述】：

[foo|='bar'] "选择所有具有 [foo] 属性以 "bar" 开头的元素

[foo^='bar'] "选择每个 [foo] 属性值以 "bar" 开头的元素

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

使用input[id^="Input-"] 选择它们有效，而input[id|='Input-'] 不返回任何结果。

那么有什么区别呢？

【问题讨论】：

这就是我们不喜欢 w3schools 的原因...
@JosephMarikle，下面的答案无论如何都不是更好。它以同样的方式令人困惑和混淆。此外，很难使用面向非实用的规范，而 w3school 已经准备就绪。工作的时候很方便。
MDN Reference -Attribute selectors

【解决方案1】：

来自“真实”参考（W3C）：

E[foo^="bar"] 一个 E 元素，其 "foo" 属性值正好以字符串 "bar" 开头

E[foo|="en"] 一个 E 元素，其“foo”属性有一个以连字符分隔的值列表（从左侧开始）以“en”开始

当出现不一致时，请始终使用实际标准。我倾向于避开 w3schools，因为它们的质量控制有时不够出色。

【讨论】：

完全同意。 W3C 很难导航，但它是（或应该是）标准。 MDN（有一个nice section on this btw）也不错，但 w3schools 似乎总是让人失望。
W3C 确实是个好去处，虽然我偶尔会去 css-tricks.net，因为我喜欢他们的例子。
明白了，谢谢！我发现 w3schools 是简单事物的一个很好的参考，但我注意到越来越多的微妙之处表明它们会像这样出错。有点烦人的恕我直言。
能否请您帮助我更好地理解它。 [foo^="bar"] 将选择具有以下属性声明的元素：foo="bar"，而 foo|="bar" 不会选择元素，因为它需要在属性值中出现连字符。因此，对于要被这两个选择器匹配的元素，其属性声明可以如下：foo="bar-"。我对吗？如果我理解错误并且我不正确，那么您的答案缺乏正确性，因为我上面的陈述与您的答案不矛盾。
能否请您提供破折号分隔列表的定义？例如。是否将空字符串视为破折号分隔列表？

【解决方案2】：

https://css-tricks.com/attribute-selectors/

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

【讨论】：