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

问题描述 投票：20回答：4

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

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

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

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

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

css css-selectors pseudo-class
4个回答
30
投票

在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()与其对应的属性选择器之间的差异类似于:lang()与其对应的属性选择器之间的差异 - 到了第一个句子的位置。以下引用实际上是描述:lang()的部分中同一段落的逐字复制：

dir（C）和''[dir = C]''之间的区别在于''[dir = C]''仅对元素上的给定属性进行比较，而：dir（C）伪 - class使用UAs对文档语义的了解来执行比较。例如，在HTML中，元素的方向性继承，以便没有dir属性的子节点与具有有效dir属性的最近祖先具有相同的方向性。另一个例子，在HTML中，匹配''[dir = auto]''的元素将匹配：dir（ltr）或：dir（rtl），具体取决于由其内容确定的元素的已解析方向性。 [HTML5]

4
投票

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

2
投票

According to the spec，

如果文档语言指定了如何确定元素的人类语言，则可以在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. 它保证不区分大小写，而

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

0
投票

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.