The difference between :lang(C) and the ‘|=’ operator is that the ‘|=’ operator only performs a comparison against a given attribute on the element, while the :lang(C) pseudo-class uses the UAs knowledge of the document’s semantics to perform the comparison.
In this HTML example, only the BODY matches [lang|=fr] (because it has a LANG attribute) but both the BODY and the P match :lang(fr) (because both are in French). The P does not match the [lang|=fr] because it does not have a LANG attribute.
06000
在您的示例中,以下选择器也将与.foo元素匹配:
.foo:lang(en)
但是如果没有自己的lang属性设置,以下选择器将不会:
.foo[lang="en"]
.foo[lang|="en"]
对于浏览器支持,从IE8开始支持lang()伪类,所以IE7真的是唯一通过在属性选择器上使用伪类无法支持的浏览器。
Selectors 4引入了:根据它们的方向性匹配元素的dir()伪类。因为方向性是与语言相关的属性,所以dir和lang属性在HTML中的工作类似,并且dir()与其对应的属性选择器之间的区别类似于:lang()和其对应的属性选择器之间的区别以下报价的第一句其实就是描述的部分中同一段的单词副本:lang():
The difference between :dir(C) and ”[dir=C]” is that ”[dir=C]” only performs a comparison against a given attribute on the element, while the :dir(C) pseudo-class uses the UAs knowledge of the document’s semantics to perform the comparison. For example, in HTML, the directionality of an element inherits so that a child without a dir attribute will have the same directionality as its closest ancestor with a valid dir attribute. As another example, in HTML, an element that matches ”[dir=auto]” will match either :dir(ltr) or :dir(rtl) depending on the resolved directionality of the elements as determined by its contents. [HTML5]