以下两个CSS选择器有什么区别?
[attribute|=value]
和[attribute^=value]
在W3Schools上,文档说:
[lang | = en]选择具有以“en”
开头的lang属性值的所有元素a [href ^ =“https”]选择href属性值以“https”开头的每个
<a>
元素
“以...开头”和“以...开头”之间是否存在差异,或两个选择器是否匹配相同的元素?
答案 0 :(得分:5)
MDN has the better description:
[attr|=value]
表示属性名称为的元素 ATTR。它的值可以是“值”,也可以以“值”开头 紧接着是“ - ”(U + 002D)。它可以用于语言 子码匹配。
[attr^=value]
表示属性名称为attr的元素 其值的前缀为&#34;值&#34;。
因此[attr|=foo]
将匹配attr="foo"
或attr="foo-bar"
,但不匹配attr="foobar"
。
另一方面,[attr^=foo]
会匹配其中任何一个。
如上所述,|=
的主要目的是匹配en-us
等语言环境/语言代码。请注意,对于特定语言,您应该使用:lang()
,但这更灵活。
答案 1 :(得分:0)
它们相似,但略有不同。作为W3 states管道格式:[attribute|=value]
[att | = val]表示具有att属性及其值的元素 或者正好是“val”或者以“val”开头 接着是“ - ”(U + 002D)。这主要是为了允许语言 子码匹配(例如,a元素中的hreflang属性) HTML)如BCP 47([BCP47])或其后继者中所述。对于郎(或 xml:lang)语言子码匹配,请参阅:lang 伪类。
因此,匹配具有属性的元素,其中值恰好为val
,或者值以val-
开头。
[attribute^=value]
匹配给定属性仅以value
开头的元素。这将匹配<a href="https://www.google.com">
和<a href="https://www.yahoo.com">