joh*_*ohn 21 css css-selectors pseudo-class
CSS语言伪类允许我们为不同的语言指定不同的样式,如下所示:
html:lang(en) .foo { ... }
但是,这在IE7中不起作用,所以我一直在使用属性选择器:
html[lang="en"] .foo { ... }
他们似乎做同样的事情,但有任何微妙的差异吗？如果没有,为什么CSS甚至有一个语言伪类,当属性选择器做同样的事情？
Bol*_*ock 30
在HTML中,:lang()伪类和属性选择器都将匹配具有相应lang属性的元素.
不同的是,一个浏览器可能不得不确定给定元件的抵靠测试时的语言的其它方式:lang(),其可通过在文档语言和/或实施限定伪类,而一个属性选择器将只检查一个元件即给定属性,没有任何附带的基于文档的语义.
例如,在HTML中,伪类还将匹配任何元素的后代,这些后代没有不同lang,这取决于浏览器如何确定这些后代的语言.通常,后代将从其祖先继承语言属性(如果未明确设置).
从规格:
之间的差值
:lang(C)"| ="和操作者的是,"| ="操作者只执行针对元件上的给定的属性的比较,而:lang(C)伪类使用文档的语义的UA的知识来执行比较.在这个HTML示例中,只有BODY匹配
[lang|=fr](因为它具有LANG属性),但是BODY和P匹配:lang(fr)(因为两者都是法语).P与the不匹配,[lang|=fr]因为它没有LANG属性.Run Code Online (Sandbox Code Playgroud)<body lang=fr> <p>Je suis français.</p> </body>
在您的示例中,以下选择器也将匹配您的.foo元素:
.foo:lang(en)
但是如果它没有自己的lang属性集,则以下选择器不会:
.foo[lang="en"]
.foo[lang|="en"]
至于浏览器支持,:lang()从IE8开始支持伪类,因此IE7确实是唯一一个通过属性选择器使用伪类无法支持的浏览器.
选择器4:lang()基于其方向性引入用于匹配元素的伪类.由于方向性是与语言相关的特性,:lang()并且:dir()属性在HTML类似的工作,之间的差别dir和其相应的属性选择是类似于之间lang及其相应的属性选择-到以下报价的第一句话就是在点事实上,在描述的部分中,同一段落的逐字复制:dir():
之间的差:(C)和 '目录'[DIR = C] '' 是 ''[DIR = C] '' 仅执行针对元件上的给定的属性的比较,而:DIR(C)的伪class使用UAs对文档语义的了解来执行比较.例如,在HTML中,元素的方向性继承,以便没有dir属性的子节点与具有有效dir属性的最近祖先具有相同的方向性.作为另一示例,在HTML中,匹配"元素" [DIR =自动]""将匹配:DIR(LTR)或:取决于如通过它的内容确定的元件的解决方向性DIR(RTL).[HTML5]
还有一件事没有被其他人提到 -:lang()伪类对如何设置元素的语言不感兴趣。在 XHTML 文档（具有 XML MIME 类型的真正 XHTML）中，您可以使用xml:lang="en"和 元素将匹配:lang(en)，但不匹配[lang="en"]。
| 归档时间： |
|
| 查看次数： |
14627 次 |
| 最近记录： |