html [lang =“en”]和html:lang(en)在CSS中有什么区别?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (160)

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

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

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

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

他们似乎做同样的事情,但是有什么细微差别?如果没有,为什么CSS甚至有一个语言伪类,当属性选择器完成同样的事情?

提问于
用户回答回答于

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

不同的是,一个浏览器可能不得不确定给定元件的抵靠测试时的语言的其它方式:lang(),其可通过在文档语言和/或实施限定伪类,而一个属性选择器将检查一个元件即给定的属性,没有任何附带的基于文档的语义。

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

: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>

在你的例子中,下面的选择器也会匹配你的.foo元素:

.foo:lang(en)

但是下面的选择器不会,如果它没有自己的lang属性集:

.foo[lang="en"]
.foo[lang|="en"]

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

用户回答回答于

还有一件事没有被其他人提及 - :lang()伪类不关心如何设置元素的语言。在XHTML文档中(使用XML MIME类型的真正的XHTML),可以使用xml:lang="en"并且元素将匹配:lang(en)但不匹配[lang="en"]

扫码关注云+社区