CSS选择器澄清：| = vs ^ =

Question

According to W3Schools：

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

和

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

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

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

那有什么区别？

Answer 1

来自“真实”引用（W3C）：

  

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

     

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

当出现不一致时，请务必遵守实际标准。我倾向于避免使用w3schools，因为他们的质量控制有时不如恒星。

Answer 2

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

参见| =部分，差异在破折号分隔列表中。