html5 lang en 乱码,CSS中的html [lang =“en”]和html：lang(en)有什么区别？

最新推荐文章于 2025-01-20 11:37:49 发布

转载最新推荐文章于 2025-01-20 11:37:49 发布 · 469 阅读

文章标签：

这篇博客探讨了CSS中lang()和dir()伪类与属性选择器的区别。lang()根据文档语义比较元素语言，而|=仅检查元素的lang属性。例如，在HTML中，即使没有lang属性，如果元素内容为法语，:lang(fr)也会匹配。dir()伪类则考虑元素的文本方向，与属性选择器类似，但会根据继承和内容自动确定方向。该文还提到，lang()和dir()的支持从IE8开始，而更早的版本不支持伪类与属性选择器的组合。

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.

06000

在您的示例中，以下选择器也将与.foo元素匹配：

.foo:lang(en)

但是如果没有自己的lang属性设置，以下选择器将不会：

.foo[lang="en"]

.foo[lang|="en"]

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

Selectors 4引入了：根据它们的方向性匹配元素的dir()伪类。因为方向性是与语言相关的属性，所以dir和lang属性在HTML中的工作类似，并且dir()与其对应的属性选择器之间的区别类似于：lang()和其对应的属性选择器之间的区别以下报价的第一句其实就是描述的部分中同一段的单词副本：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,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]