Question

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

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

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

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

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

Answer 1

在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]

Answer 2

其他任何人都没有提到的另一件事 - :lang()伪类对如何设置元素的语言不感兴趣。在XHTML文档（具有XML MIME类型的真XHTML）中，您可以使用xml:lang="en"，该元素将与:lang(en)匹配，但不会与[lang="en"]匹配。

Answer 3

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不必是有效的语言名称。

那是：

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

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

Answer 4

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

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

CSS中的html [lang =“en”]和html：lang（en）有什么区别？

4 个答案: