CSS语言伪类允许我们为不同的语言指定不同的样式，如下所示：
html:lang(en) .foo { ... }
但是，这在IE7中不起作用，因此我一直在使用属性选择器：
html[lang="en"] .foo { ... }
他们似乎做同一件事，但是有细微的差别吗？如果没有，当属性选择器执行完全相同的操作时，为什么CSS甚至还具有语言伪类？
在HTML中，:lang()伪类和属性选择器都将匹配具有相应lang属性的元素。
:lang()
lang
不同的是，一个浏览器可能不得不确定给定元件的抵靠测试时的语言的其它方式:lang()，其可通过在文档语言和/或实施限定伪类，而一个属性选择器将 只 检查一个元件 即给定的属性 ，不附带任何基于文档的语义。
例如，在HTML中，伪类还将匹配元素的任何后代，后者没有不同lang，取决于浏览器如何确定这些后代的语言。通常，如果未明确设置后代，则后代将从其祖先那里继承language属性。
这里是什么规格说：
: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(C)与’| =’运算符之间的区别在于’| =’运算符仅对元素上的给定属性执行比较，而:lang(C)伪类使用UAs对文档语义的了解来执行比较。
:lang(C)
在此HTML示例中，仅BODY匹配[lang|=fr]（因为它具有LANG属性），而BODY和P匹配:lang(fr)（因为它们都是法语）。P不匹配，[lang|=fr]因为它没有LANG属性。 <body lang=fr> <p>Je suis français.</p> </body>
在此HTML示例中，仅BODY匹配[lang|=fr]（因为它具有LANG属性），而BODY和P匹配:lang(fr)（因为它们都是法语）。P不匹配，[lang|=fr]因为它没有LANG属性。
[lang|=fr]
:lang(fr)
<body lang=fr> <p>Je suis français.</p> </body>
请注意“具有LANG属性”和“法语”的特定用语。如您所想，这两个短语在英语中的含义非常不同。
在您的示例中，以下选择器也将与您的.foo元素匹配：
.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()
dir
：dir（C）和“ [dir = C]”之间的区别在于，“ [dir = C]”仅对元素上的给定属性执行比较，而：dir（C）伪类使用UA的文档语义知识来执行比较。例如，在HTML中，元素的方向性是继承的，因此没有dir属性的子级将与其具有有效dir属性的最接近祖先具有相同的方向性。再举一个例子，在HTML中，匹配“ [dir = auto]”的元素将匹配：dir（ltr）或：dir（rtl），具体取决于元素的解析方向（由其内容决定）。[HTML5]
