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

Question

据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,因为他们的质量控制有时不如恒星.