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

Question

W3C正在为选择器4中的方向检测引入一个新的伪类。我想知道这和一个正常的属性选择器有什么区别：

CSS2 -属性选择器

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

选择器4 - dir伪类

E:dir(rtl) { ... }

是否有特定的理由为此创建一个新的伪类？这些选择器是相同的还是它们的行为不同？是否有任何性能或特定的含义？

Answer 1

根据MDN的说法，存在一些微妙的差异：

dir伪类基于包含在其中的文本的方向性匹配元素。在HTML中，方向由dir属性决定。对于其他文档类型，可能有其他确定语言的文档方法。 注意，伪类:dir()的使用并不等同于使用dir=…。属性选择器后者匹配dir的值，并且在没有设置属性时不匹配，即使在这种情况下，元素继承其父元素的值；类似地，dir=rtl或dir=ltr将不匹配可以在dir属性上使用的自动值。相反，:dir()将匹配由UA计算的值、被继承的值或auto值。 此外:dir()只考虑指向性的语义值(文档中定义的方向性)，大多数情况下是HTML。它不会考虑样式的方向性，一个由CSS属性设置的方向，这是纯粹的风格。