CSS 中的 html[lang="en"] 和 html:lang(en) 有什么区别? [英] What's the difference between html[lang="en"] and html:lang(en) in CSS?
问题描述
CSS 语言伪类允许我们为不同的语言指定不同的样式，如下所示:
The CSS language pseudo-class to allow us specify different styles for different languages, like so:
html:lang(en) .foo { ... }
但是，这在 IE7 中不起作用，所以我一直在使用属性选择器:
However, this doesn't work in IE7, so I've been using an attribute selector:
html[lang="en"] .foo { ... }
他们似乎做同样的事情，但有什么细微的区别吗?如果没有，当属性选择器做同样的事情时，为什么 CSS 甚至还有一个语言伪类?
They seem to do the same thing, but are there any subtle differences? And if not, why does CSS even have a language pseudo-class, when the attribute selector does the exact same thing?
推荐答案
在 HTML 中，:lang() 伪类和属性选择器都会将元素与对应的 匹配lang 属性.
In HTML, both the :lang() pseudo-class and the attribute selector will match an element with the corresponding lang attribute.
不同之处在于，当针对 :lang() 伪类进行测试时，浏览器可能有其他方法来确定给定元素的语言，伪类可能由文档语言和/或实现，而属性选择器将仅检查元素的给定属性，而没有任何伴随的基于文档的语义.
The difference is that a browser may have other ways of determining the language of a given element when testing against the :lang() pseudo-class which may be defined by the document language and/or the implementation, whereas an attribute selector will only check an element for that given attribute, without any accompanying document-based semantics.
例如，在 HTML 中，伪类还将匹配没有不同 lang 的元素的任何后代，具体取决于浏览器如何确定这些后代的语言.通常，如果没有明确设置，后代将继承其祖先的语言属性.
For example, in HTML, the pseudo-class will also match any of the element's descendants for which there isn't a different lang, depending on how a browser determines the language for those descendants. Usually, the descendants will inherit the language attribute from their ancestor if it is not explicitly set.
规范是这样说的:
:lang(C) 和 '|=' 操作符的区别在于 '|=' 操作符只对元素的给定属性进行比较，而 :lang(C) 伪类使用 UA 对文档语义的了解来执行比较.
The difference between
:lang(C)and the ‘|=’ operator is that the ‘|=’ operator only performs a comparison against a given attribute on the element, while the:lang(C)pseudo-class uses the UAs knowledge of the document's semantics to perform the comparison.
在这个 HTML 示例中，只有 BODY 匹配 [lang|=fr](因为它具有 LANG 属性)但 BODY 和 P 都匹配 :lang(fr)(因为两者都是法语).P 与 [lang|=fr] 不匹配，因为它没有 LANG 属性.
In this HTML example, only the BODY matches
[lang|=fr](because it has a LANG attribute) but both the BODY and the P match:lang(fr)(because both are in French). The P does not match the[lang|=fr]because it does not have a LANG attribute.
<body lang=fr>
<p>Je suis français.</p>
</body>
请注意具有 LANG 属性"和在法语中"的具体措辞.正如您所想象的那样，这两个短语在英语中的含义非常不同.
Notice the specific phrasings of "has a LANG attribute" and "are in French". These two phrases have very different meanings in English, as you might imagine.
在您的示例中，以下选择器也将匹配您的 .foo 元素:
In your example, the following selector will also match your .foo element:
.foo:lang(en)
但以下选择器不会，如果它没有自己的 lang 属性集:
But the following selectors won't, if it doesn't have its own lang attribute set:
.foo[lang="en"]
.foo[lang|="en"]
至于浏览器支持，从 IE8 开始支持 :lang() 伪类，因此 IE7 确实是唯一一个使用伪类无法支持的浏览器属性选择器.
As for browser support, the :lang() pseudo-class is supported starting from IE8, so IE7 really is the only browser you will be unable to support by using the pseudo-class over the attribute selector.
基于这种理解，您可以回答我应该使用哪个"的问题:您应该始终默认使用 :lang() 伪类，除非某些怪癖(或需要支持 IE7)需要使用属性选择器来解决.
Based on this understanding you can then answer the question "which should I use": you should always use the :lang() pseudo-class by default, unless certain quirks (or the need to support IE7) require working around by using an attribute selector instead.
Selectors 4 不仅 为 :lang() 伪类 (从而扩大了它和属性选择器之间的功能差距)，还有 引入了 :dir() 伪类，用于根据方向性匹配元素.因为方向性是与语言相关的属性，所以 dir 和 lang 属性在 HTML 中的作用类似，:dir() 和它的区别对应的属性选择器类似于 :lang() 与其对应的属性选择器之间的选择器——以下引用的第一句实际上是一个逐字复制 在描述 :lang() 的部分中的同一段落:
Selectors 4 not only brings enhanced functionality to the :lang() pseudo-class (thereby widening the gap in functionality between it and attribute selectors), but also introduces the :dir() pseudo-class for matching elements based on their directionality. Because directionality is a language-related property, the dir and lang attributes work similarly in HTML, and the difference between :dir() and its corresponding attribute selector is analogous to that between :lang() and its corresponding attribute selector — to the point where the first sentence of the following quotation is in fact a word-for-word copy of the same paragraph in the section describing :lang():
:dir(C) 和 ''[dir=C]'' 之间的区别在于 ''[dir=C]'' 只对元素上的给定属性进行比较，而 :dir(C) 伪类使用 UA 对文档语义的了解来执行比较.例如，在 HTML 中，元素的方向性继承，因此没有 dir 属性的子元素将具有与其最近的具有有效 dir 属性的祖先相同的方向性.另一个例子，在 HTML 中，匹配 ''[dir=auto]'' 的元素将匹配 :dir(ltr) 或 :dir(rtl) ，这取决于元素的解析方向性，由其内容决定.[HTML5]
The difference between :dir(C) and ''[dir=C]'' is that ''[dir=C]'' only performs a comparison against a given attribute on the element, while the :dir(C) pseudo-class uses the UAs knowledge of the document’s semantics to perform the comparison. For example, in HTML, the directionality of an element inherits so that a child without a dir attribute will have the same directionality as its closest ancestor with a valid dir attribute. As another example, in HTML, an element that matches ''[dir=auto]'' will match either :dir(ltr) or :dir(rtl) depending on the resolved directionality of the elements as determined by its contents. [HTML5]
这篇关于CSS 中的 html[lang="en"] 和 html:lang(en) 有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
