css - [attribute|=value] 和 [attribute^=value] CSS 选择器有什么区别？

Question

这个问题在这里已经有了答案:





What is the difference between pipe (|) and caret (^) attribute selectors?

(4 个回答)


5年前关闭。




以下两个 CSS 选择器有什么区别？
[attribute|=value]和 [attribute^=value]
上 W3Schools ，文档说:

[lang|=en] Selects all elements with a lang attribute value starting with "en"

a[href^="https"] Selects every <a> element whose href attribute value begins with "https"

“开始于”和“开始于”之间有区别还是两个选择器会匹配相同的元素？

Answer 1

MDN has the better description :

[attr|=value]
Represents an element with an attribute name of attr. Its value can be exactly “value” or can begin with “value” immediately followed by “-” (U+002D). It can be used for language subcode matches.

[attr^=value]
Represents an element with an attribute name of attr and whose value is prefixed by "value".

所以 [attr|=foo]会匹配 attr="foo"或 attr="foo-bar" ，但不是 attr="foobar" . [attr^=foo]另一方面将匹配任何一个。
|=的主要用途如上所述，用于匹配区域设置/语言代码，如 en-us .请注意，对于特定语言，您应该使用 :lang() 但是，这要灵活得多。