ᴄʀᴏ*_*ᴢᴇᴛ 2 css css-selectors
以下两个CSS选择器有什么区别？
[attribute|=value] 和 [attribute^=value]
[attribute|=value]
[attribute^=value]
在W3Schools上,文档说:
[lang | = en]选择lang属性值以"en"开头的所有元素 a [href ^ ="https"]选择<a>href属性值以"https"开头的每个元素
[lang | = en]选择lang属性值以"en"开头的所有元素
a [href ^ ="https"]选择<a>href属性值以"https"开头的每个元素
<a>
"以...开头"和"以...开头"之间是否存在差异,或者两个选择器是否匹配相同的元素？
dec*_*eze 6
MDN有更好的描述:
[attr|=value] 表示属性名称为attr的元素.它的值可以是"值",也可以以"值"开头,后跟" - "(U + 002D).它可以用于语言子码匹配. [attr^=value] 表示属性名称为attr且其值以"value"为前缀的元素.
[attr|=value] 表示属性名称为attr的元素.它的值可以是"值",也可以以"值"开头,后跟" - "(U + 002D).它可以用于语言子码匹配.
[attr|=value]
[attr^=value] 表示属性名称为attr且其值以"value"为前缀的元素.
[attr^=value]
因此,[attr|=foo]将匹配attr="foo"或attr="foo-bar",但不是attr="foobar". [attr^=foo]另一方面,任何一个都匹配.
[attr|=foo]
attr="foo"
attr="foo-bar"
attr="foobar"
[attr^=foo]
如上所述,主要目的|=是匹配区域设置/语言代码en-us.请注意,对于特定语言,您应该使用:lang()它,这更灵活.
|=
en-us
:lang()
归档时间：
9 年，6 月 前
查看次数：
1552 次
最近记录：
8 年，9 月 前