W3C 在 Selectors 4 中引入了一个新的方向检测伪类。我想知道它与普通属性选择器有什么区别：
CSS2 - 属性选择器
E[dir="rtl"] { ... }
选择器 4 - dir 伪类
E:dir(rtl) { ... }
为此创建一个新的伪类是否有特定的原因？这些选择器是相同的还是它们的行为不同？是否有任何性能或特异性影响？
【问题讨论】：
标签： css css-selectors
为此创建一个新的伪类是否有特定的原因？
:lang() 伪类与 CSS2 中的属性选择器一起引入的原因相同。1参见What's the difference between html[lang="en"] and html:lang(en) in CSS?
这些选择器是相同的还是它们的行为不同？
查看我对链接问题的回答。为了完整起见，以下是来自Selectors 4 的相关引用：
:dir(C) 和 ''[dir=C]'' 之间的区别在于 ''[dir=C]'' 只对元素上的给定属性进行比较，而 :dir(C ) 伪类使用 UA 对文档语义的了解来执行比较。例如，在 HTML 中，元素的方向性继承，因此没有 dir 属性的子元素将具有与其最近的具有有效 dir 属性的祖先相同的方向性。作为另一个例子，在 HTML 中，匹配 ''[dir=auto]'' 的元素将匹配 :dir(ltr) 或 :dir(rtl) ，这取决于元素的解析方向性，由其内容确定。 [HTML5]
为了强调:dir() 和:lang() 之间的相似之处，如果您仔细观察，第一句话实际上是逐字复制描述:lang()的部分。
:lang() 的其余大部分文本都是新的，但是，因为与 :dir() 一起，Selectors 4 还为 :lang() 引入了增强功能。
是否有任何性能或特异性影响？
由于您上一个问题的答案是它们的行为不同，因此性能无关紧要。
没有具体含义，因为伪类和属性选择器同样具体。
1我不清楚为什么 :dir() 花了将近 15 年的时间才被添加到选择器中，但是你去吧。
【讨论】：
根据MDN，存在一些细微差别：
:dir CSS 伪类根据方向性匹配元素 其中包含的文本。在 HTML 中，方向由 目录属性。对于其他文档类型，可能还有其他 记录确定语言的方法。
请注意，伪类 :dir() 的用法不等同于 使用 [dir=...] 属性选择器。后者匹配一个值 dir 并且在没有设置属性时不匹配，即使在那个 如果元素继承其父元素的值；同样 [dir=rtl] 或 [dir=ltr] 与可在 dir 上使用的 auto 值不匹配 属性。相反， :dir() 将匹配计算的值 UA，被继承或自动值。
另外 :dir() 只考虑方向性的语义值， 在文档中定义的那个，大部分时间在 HTML 中。它不会 考虑样式方向性，由 CSS 属性设置，例如 方向是纯粹的风格。
【讨论】：