26

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

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

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

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

他们似乎做同样的事情，但有什么细微的区别吗？如果没有，当属性选择器做完全相同的事情时，为什么 CSS 甚至还有一个语言伪类？

4

4 回答 4

36

在 HTML 中，:lang()伪类和属性选择器都将匹配具有相应lang属性的元素。

:lang()不同之处在于，当针对可能由文档语言和/或实现定义的伪类进行测试时，浏览器可能有其他方法来确定给定元素的语言，而属性选择器只会检查一个元素给定的属性，没有任何伴随的基于文档的语义。

例如，在 HTML 中，伪类也将匹配元素的任何没有不同的后代，这lang取决于浏览器如何确定这些后代的语言。通常，如果没有明确设置，后代将继承其祖先的语言属性。

这是规范所说的：

和 '|=' 运算符之间的区别在于:lang(C)，'|=' 运算符只对元素上的给定属性执行比较，而:lang(C)伪类使用 UA 对文档语义的了解来执行比较。

在这个 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"]

至于浏览器支持，:lang()从 IE8 开始支持伪类，所以 IE7 确实是唯一一个通过在属性选择器上使用伪类将无法支持的浏览器。

基于这种理解，您可以回答“我应该使用哪个”的问题：默认情况下您应该始终使用:lang()伪类，除非某些怪癖（或需要支持 IE7）需要使用属性选择器来解决。

选择器 4 不仅为伪类带来了增强的功能:lang()（从而扩大了它与属性选择器之间的功能差距），而且还引入了:dir()伪类，用于根据元素的方向性匹配元素。因为方向性是与语言相关的属性，所以dir和lang属性在 HTML 中的工作方式类似，其对应的属性选择器之间的区别:dir()类似于与其对应的属性选择器之间的区别:lang()——直到下面引用的第一句在实际上是描述部分中同一段落的逐字复制:lang()：

:dir(C) 和 ''[dir=C]'' 之间的区别在于 ''[dir=C]'' 只对元素上的给定属性执行比较，而 :dir(C) 伪类使用 UA 对文档语义的了解来执行比较。例如，在 HTML 中，元素的方向性继承，因此没有 dir 属性的子元素将具有与其最近的具有有效 dir 属性的祖先相同的方向性。另一个例子，在 HTML 中，匹配 ''[dir=auto]'' 的元素将匹配 :dir(ltr) 或 :dir(rtl) ，这取决于元素的解析方向性，由其​​内容决定。[HTML5]

于 2012-01-18T19:48:46.370 回答
5

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

于 2012-01-18T20:02:31.683 回答
3

根据规范，

如果文档语言指定了如何确定元素的人类语言，则可以在 CSS 中编写选择器，根据元素的语言匹配元素。例如，在 HTML [HTML4] 中，语言由“lang”属性、META 元素以及可能来自协议的信息（例如 HTTP 标头）的组合确定。XML 使用一个名为 xml:lang 的属性，并且可能有其他特定于文档语言的方法来确定语言。

如果元素使用语言 C，则伪类 ':lang(C)' 匹配。是否匹配仅基于标识符 C 是否等于元素的语言值或由连字符分隔的子字符串，就像由 '|=' 运算符执行的一样。对于 ASCII 范围内的字符，C 与元素的语言值的匹配不区分大小写。标识符 C 不必是有效的语言名称。

那是：

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

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

于 2012-01-18T19:52:55.920 回答
0

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

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

于 2012-01-18T19:51:52.780 回答