[attribute | = value]和[attribute ^ = value] CSS选择器之间有什么区别?

时间:2016-04-25 13:55:18

标签: css css-selectors

以下两个CSS选择器有什么区别?

[attribute|=value][attribute^=value]

W3Schools上,文档说:

  

[lang | = en]选择具有以“en”

开头的lang属性值的所有元素      

a [href ^ =“https”]选择href属性值以“https”开头的每个<a>元素

“以...开头”和“以...开头”之间是否存在差异,或两个选择器是否匹配相同的元素?

2 个答案:

答案 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">