CSS中的html [lang =“en”]和html：lang（en）之间有什么区别？ [英] What's the difference between html[lang="en"] and html:lang(en) in CSS?
问题描述
CSS语言伪类允许我们为不同的语言指定不同的样式，例如：
html：lang en）.foo {...}
但是，这在IE7中不起作用，所以我已使用属性选择器：
html [lang =en] .foo {...}
他们似乎做同样的事情，但是有什么细微的差别吗？如果没有，为什么CSS甚至有一个语言伪类，当属性选择器做同样的事情？
在HTML中，：lang（）伪类和属性选择器将匹配具有相应 lang 属性。
不同的是，浏览器可能有其他方法来确定给定元素的语言，当测试：lang（） / code>伪类可以由文档语言和/或实现定义，而属性选择器将仅检查给定属性的元素 ，没有任何伴随的基于文档的语义。
例如，在HTML中，伪类也将匹配任何元素的后代， lang ，具体取决于浏览器如何确定这些后代的语言。通常，如果未明确设置，后代将从祖先继承语言属性。
从 spec ：
c $ c>：lang（C）和'| ='运算符是'| ='运算符只执行与元素上给定属性的比较，而
：lang（C）伪类使用UA对文档语义的了解来执行比较。
在此HTML示例中，只有BODY匹配
[lang | = fr]（因为它有一个LANG属性），但BODY和P匹配：lang（fr）（因为两者都是法语）。 P不符合[lang | = fr]，因为它没有LANG属性。< body lang = fr>
< p> Je suisfrançais。< / p>
< / body>
以下选择器也将匹配您的 .foo 元素：
.foo： lang（en）
但是下面的选择器不会，如果没有自己的 lang 属性集：
.foo [lang =en]
.foo [lang | =en]
c $ c>：lang（）伪类支持从IE8开始，所以IE7真的是唯一的浏览器，你将无法支持通过使用伪类超过属性选择器。 p>
选择器4 引入：dir（）伪类，用于根据元素的方向性匹配元素。因为方向性是与语言相关的属性，所以 dir 和 lang 属性在HTML中的工作方式类似， code>：dir（），其对应的属性选择器类似于：lang（）及其对应的属性选择器 - 以下引文的第一个句子实际上是描述的段落中同一段落的单词复制：lang（）：
dir（C）和'dir = C]'之间的区别是'dir = C]''只执行与元素上的给定属性的比较，而：dir（C）伪类使用UA对文档语义的了解来执行比较。例如，在HTML中，元素的方向性继承，使得没有dir属性的子元素将具有与其具有有效dir属性的最接近祖先相同的方向性。作为另一示例，在HTML中，与''[dir = auto]''匹配的元素将匹配：dir（ltr）或：dir（rtl），这取决于由其内容确定的元素的解析方向性。 [HTML5]
The CSS language pseudo-class to allow us specify different styles for different languages, like so:
html:lang(en) .foo { ... }
However, this doesn't work in IE7, so I've been using an attribute selector:
html[lang="en"] .foo { ... }
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?
In HTML, both the :lang() pseudo-class and the attribute selector will match an element with the corresponding lang attribute.
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.
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.
From the spec:
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.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>
In your example, the following selector will also match your .foo element:
.foo:lang(en)
But the following selectors won't, if it doesn't have its own lang attribute set:
.foo[lang="en"]
.foo[lang|="en"]
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.
Selectors 4 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 similar 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():
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屋！
