CSS中的E:dir(dir)和E [dir ="dir"]有什么区别？

Question

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

CSS2 - 属性选择器

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

选择器4 - dir伪类

E:dir(rtl) { ... }

为此创建一个新的伪类是否有特定的原因？这些选择器是相同的还是它们的行为不同？是否有任何表现或特异性影响？

Answer 1

为此创建一个新的伪类是否有特定的原因？

:lang()与CSS2中的属性选择器一起引入伪类的原因相同.¹请参阅CSS中的html [lang ="en"]和html:lang(en)之间的区别是什么？

这些选择器是相同的还是它们的行为不同？

请参阅我对链接问题的回答.为了完整起见,这是Selectors 4的相关引文:

dir(C)和''[dir = C]''之间的区别在于''[dir = C]''仅对元素上的给定属性进行比较,而:dir(C)伪 - class使用UAs对文档语义的了解来执行比较.例如,在HTML中,元素的方向性继承,以便没有dir属性的子节点与具有有效dir属性的最近祖先具有相同的方向性.另一个例子,在HTML中,匹配''[dir = auto]''的元素将匹配:dir(ltr)或:dir(rtl),具体取决于由其内容确定的元素的已解析方向性.[HTML5]

为了推动对之间的相似点回家:dir()和:lang(),如果你仔细观察的第一句话,其实是在一个字对字复制的部分同款的描述:lang().

:lang()然而,大部分文本都是新的,因为同时:dir(),Selectors 4还引入了增强功能:lang().

是否有任何表现或特异性影响？

由于对上一个问题的回答是它们的行为不同,因此性能无关紧要.

没有特异性含义,因为伪类和属性选择器同样具体.

¹ _{我不清楚为什么将近15年的:dir()时间添加到选择器中,但是你去了.}