CSS中的html [lang =“en”]和html:lang(en)有什么区别?

时间:2012-01-18 19:45:02

标签: css css-selectors pseudo-class

CSS语言伪类允许我们为不同的语言指定不同的样式,如下所示:

html:lang(en) .foo { ... }

但是,这在IE7中不起作用,所以我一直在使用属性选择器:

html[lang="en"] .foo { ... }

他们似乎做同样的事情,但有任何微妙的差异吗?如果没有,为什么CSS甚至有一个语言伪类,当属性选择器做同样的事情?

4 个答案:

答案 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。由于方向性是与语言相关的属性,因此dirlang属性在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)

According to the spec

  

如果文档语言指定了如何确定元素的人类语言,则可以在CSS中编写与基于其语言的元素匹配的选择器。例如,在HTML [HTML4]中,语言由&#34; lang&#34;的组合决定。属性,META元素,以及可能来自协议的信息(例如HTTP标头)。 XML使用一个名为xml:lang的属性,可能还有其他特定于文档语言的方法来确定语言。

     

伪班&#39; lang(C)&#39;如果元素在语言C中,则匹配。是否存在匹配仅基于标识符C等于元素的语言值的连字符分隔的子字符串,与执行的方式相同通过&#39; | =&#39;运营商。对于ASCII范围内的字符,C与元素的语言值的匹配是不区分大小写的。标识符C不必是有效的语言名称。

那是:

  1. 除了简单的lang属性之外,它还可用于指定语言的许多其他方法。
    • 最重要的是,正如@ BoltClock的答案中详述的那样,它将使用指定的语言(以任何方式)对容器元素,而不仅仅是元素本身,因为语言是由子元素继承的。
  2. 它使用|=语义,即:lang(en):lang(us)都匹配span[lang=en-us]
  3. 保证不区分大小写,而
  4.   

    选择器中属性名称和值的区分大小写取决于文档语言。

答案 3 :(得分:0)

Css支持所有元素的attribtue选择器,而不仅仅支持html标记lang属性。例如,可以像css中的<a title="Jeeha" href="foo.html">bar</a>一样选择a[title=Jeeha] { ... }之类的html。

有关部分匹配和变体的详细信息,请参阅this链接。