CSS中的E:dir(dir)和E [dir ="dir"]有什么区别? [英] What is the difference between E:dir(dir) and E[dir="dir"] in CSS?

问题描述

W3C在选择器4中引入了一种新的伪类用于方向检测.我想知道它与普通属性选择器之间有什么区别:

W3C is introducing a new pseudo-class for direction detection in Selectors 4. I am wondering what is the difference between that and a normal attribute selector:

CSS2 -属性选择器

E[dir="rtl"] { ... }

选择器4 -dir伪类

E:dir(rtl) { ... }

是否有为此创建新的伪类的特定原因?这些选择器是相同的还是行为不同?对性能或特异性有影响吗?

Is there a specific reason for creating a new pseudo-class for that? Are these selectors identical or do they behave differently? Are there any performance or specificity implications?

推荐答案

根据

According to MDN, some subtle differences exist:

:dir CSS伪类根据方向匹配元素 其中包含的文字.在HTML中，方向由 dir属性.对于其他文档类型，可能还有其他 确定语言的文档方法.

The :dir CSS pseudo-class matches elements based on the directionality of the text contained in it. In HTML, the direction is determined by the dir attribute. For other document types there may be other document methods for determining the language.

请注意，伪类:dir()的用法不等同于 使用[dir =…]属性选择器.后者匹配的值为 dir，并且在未设置任何属性的情况下不匹配，即使在该情况下 元素继承其父元素的值的情况；类似地[dir = rtl] 或[dir = ltr]与在dir上可以使用的自动值不匹配 属性.相反，:dir()将匹配由 UA(被继承)或自动值.

Note that the usage of the pseudo-class :dir() is not equivalent of using the [dir=…] attribute selectors. The latter matches a value of the dir and doesn't match when no attribute is set, even if in that case the element inherits the value of its parent; similarly [dir=rtl] or [dir=ltr] won't match the auto value that can be used on the dir attribute. In the opposite, :dir() will match the value calculated by the UA, being inherited or the auto value.

也:dir()仅考虑方向性的语义值， 文档中定义的一种，大多数情况下是用HTML编写的.不会的 考虑样式的方向性，这是由CSS属性设置的，例如 纯粹是风格的方向.

Also :dir() considers only the semantic value of the directionality, the one defined in the document, most of the time in HTML. It won't consider styling directionality, the one set by CSS properties like direction which are purely stylistic.

这篇关于CSS中的E:dir(dir)和E [dir ="dir"]有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！