CSS语言伪类允许我们为不同的语言指定不同的样式,如下所示:
html:lang(en) .foo { ... }
但是,这在IE7中不起作用,所以我一直在使用属性选择器:
html[lang="en"] .foo { ... }
他们似乎做同样的事情,但有任何微妙的差异吗?如果没有,为什么CSS甚至有一个语言伪类,当属性选择器做同样的事情?
答案 0 :(得分:28)
在HTML中,:lang()
伪类和属性选择器都将匹配具有相应lang
属性的元素。
不同之处在于,当针对可能由文档语言和/或实现定义的:lang()
伪类进行测试时,浏览器可能有其他方法来确定给定元素的语言,而属性是选择器仅 检查给定属性的元素,而不附带任何基于文档的语义。
例如,在HTML中,伪类还将匹配任何没有不同lang
的元素的后代,具体取决于浏览器如何确定这些后代的语言。通常,后代将从其祖先继承语言属性(如果未明确设置)。
以下是spec所说的内容:
:lang(C)
和'| ='运算符之间的区别在于'| ='运算符只对元素上的给定属性执行比较,而:lang(C)
伪类使用UAs知道文档的语义以执行比较。在此HTML示例中,只有BODY匹配
[lang|=fr]
(因为它具有LANG属性),但BODY和P匹配:lang(fr)
(因为两者都是法语)。 P与[lang|=fr]
不匹配,因为它没有LANG属性。<body lang=fr> <p>Je suis français.</p> </body>
请注意“具有LANG属性”和“使用法语”的具体措辞。正如您可能想象的那样,这两个短语在英语中的含义非常不同。
在您的示例中,以下选择器也会匹配您的.foo
元素:
.foo:lang(en)
但如果没有自己的lang
属性集,则以下选择器不会:
.foo[lang="en"]
.foo[lang|="en"]
至于浏览器支持,从IE8开始支持:lang()
伪类,因此IE7确实是唯一一个通过属性选择器使用伪类无法支持的浏览器。
基于这种理解,您可以回答“我应该使用哪个”这个问题:您应该始终使用:lang()
伪类默认,除非出现某些怪癖(或需要)支持IE7)需要使用属性选择器来解决。
选择器4不仅brings enhanced functionality to the :lang()
pseudo-class(从而扩大了它与属性选择器之间的功能差距),而且还基于其方向性匹配元素introduces the :dir()
pseudo-class。由于方向性是与语言相关的属性,因此dir
和lang
属性在HTML中的工作方式类似,:dir()
与其对应的属性选择器之间的差异类似于{{1}之间的差异及其相应的属性选择器 - 以下引文的第一个句子实际上是描述:lang()
的部分中同一段落的逐字复制的点: / p>
dir(C)和''[dir = C]''之间的区别在于''[dir = C]''仅对元素上的给定属性执行比较,而:dir(C )伪类使用UA知识对文档的语义进行比较。例如,在HTML中,元素的方向性继承,以便没有dir属性的子节点与具有有效dir属性的最近祖先具有相同的方向性。另一个例子,在HTML中,匹配''[dir = auto]''的元素将匹配:dir(ltr)或:dir(rtl),具体取决于由其内容确定的元素的已解析方向性。 [HTML5]
答案 1 :(得分:4)
其他任何人都没有提到的另一件事 - :lang()
伪类对如何设置元素的语言不感兴趣。在XHTML文档(具有XML MIME类型的真XHTML)中,您可以使用xml:lang="en"
,该元素将与:lang(en)
匹配,但不会与[lang="en"]
匹配。
答案 2 :(得分:2)
如果文档语言指定了如何确定元素的人类语言,则可以在CSS中编写与基于其语言的元素匹配的选择器。例如,在HTML [HTML4]中,语言由&#34; lang&#34;的组合决定。属性,META元素,以及可能来自协议的信息(例如HTTP标头)。 XML使用一个名为xml:lang的属性,可能还有其他特定于文档语言的方法来确定语言。
伪班&#39; lang(C)&#39;如果元素在语言C中,则匹配。是否存在匹配仅基于标识符C等于元素的语言值的连字符分隔的子字符串,与执行的方式相同通过&#39; | =&#39;运营商。对于ASCII范围内的字符,C与元素的语言值的匹配是不区分大小写的。标识符C不必是有效的语言名称。
那是:
lang
属性之外,它还可用于指定语言的许多其他方法。
|=
语义,即:lang(en)
和:lang(us)
都匹配span[lang=en-us]
。选择器中属性名称和值的区分大小写取决于文档语言。
答案 3 :(得分:0)
Css支持所有元素的attribtue选择器,而不仅仅支持html
标记lang
属性。例如,可以像css中的<a title="Jeeha" href="foo.html">bar</a>
一样选择a[title=Jeeha] { ... }
之类的html。
有关部分匹配和变体的详细信息,请参阅this链接。