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

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

CSS2- 属性选择器

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

选择器4-dir 伪类

E:dir(rtl) { ... }

为此创建一个新的伪类有什么具体原因吗？这些选择器是相同的还是行为不同？是否有任何性能或特异性影响？

为此创建一个新的伪类有什么具体原因吗？

The same reason the :lang() pseudo-class was introduced alongside attribute selectors in CSS2.¹ See What's the difference between html[lang="en"] and html:lang(en) in CSS? https://stackoverflow.com/questions/8916360/whats-the-difference-between-htmllang-en-and-htmllangen-in-css

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

请参阅我对链接问题的回答。这是相关引用选择器4 https://drafts.csswg.org/selectors-4/#the-dir-pseudo为了完整起见：

:dir(C) 和 ''[dir=C]'' 之间的区别在于 ''[dir=C]'' 仅对元素上的给定属性执行比较，而 :dir(C) 伪-类使用文档语义的 UA 知识来执行比较。例如，在 HTML 中，元素的方向性是继承的，因此没有 dir 属性的子元素将与其具有有效 dir 属性的最近祖先具有相同的方向性。作为另一个示例，在 HTML 中，匹配 ''[dir=auto]'' 的元素将匹配 :dir(ltr) 或 :dir(rtl)，具体取决于由其内容确定的元素的解析方向性。 [HTML5]

为了强调两者之间的相似之处:dir() and :lang()，如果你仔细看的话，第一句话实际上是逐字复制描述部分的同一段落:lang().

其余大部分文字内容是:lang()然而，这是新的，因为随着:dir(), Selectors 4 还引入了增强的功能:lang().

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

由于您上一个问题的答案是它们的行为不同，因此性能无关紧要。

没有特殊性暗示，因为伪类和属性选择器同样特殊。

¹ _{It's not clear to me why it took almost 15 years for :dir() to be added to Selectors, but there you go.}