CSS中的E：dir（dir）和E [dir =“dir”]有什么区别？

Question

W3C被引入一个新的伪类为方向检测在选择器4.我想知道是什么，和正常的属性选择器之间的区别：

CSS2 - 属性选择

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

选择4 - DIR伪类

E:dir(rtl) { ... } 

有用于创建一个新的伪具体原因上课呢？这些选择器是相同还是行为不同？是否有任何表现或特异性影响？

Answer 1

根据MDN，一些细微的差别存在：

的：DIR CSS伪类匹配的基础上包含的文本的方向性 元素。在HTML中，方向取决于 dir属性。对于其他文档类型，可能有其他文档方法来确定语言。

请注意，伪类：dir（）的使用与使用[dir = ...]属性选择器的 不等效。后者与目录的值匹配为 ，并且在未设置属性时不匹配，即使在该元素继承其父项的值的情况下也是如此。类似[dir = rtl] 或[dir = ltr]将不匹配可用于目录 属性的自动值。相反，：dir（）将匹配由UA计算的值 ，被继承的或自动值。

另外：dir（）只考虑方向性的语义值， 在文档中定义的那个，大部分时间用HTML表示。它不会 考虑样式的方向性，这是由CSS属性设置，如 方向，这是纯粹的文体。

Answer 2

是否有为此创建新的伪类的具体原因？

:lang()伪类与CSS2中的属性选择器一起引入的原因相同。 见What's the difference between html[lang="en"] and html:lang(en) in CSS?

这些是选择相同或做他们不同的表现？

查看我对相关问题的回答。下面是从Selectors 4相关报价完整起见：

的区别在于：（C）和 '目录'[DIR = C] '' 是， ''[DIR = C] '' 只执行与元素上的给定属性进行比较，而：dir（C）伪类使用UAs对文档语义的了解来执行比较。例如，在HTML中，元素的方向性会继承，因此没有dir属性的子元素将具有与具有有效dir属性的最近元素相同的方向性。作为另一个例子，在HTML中，匹配''[dir = auto]''的元素将匹配：dir（ltr）或：dir（rtl），具体取决于由其内容决定的元素的解析方向性。 [HTML5]

为驱动点回家:dir()和:lang()之间的相似性，如果你仔细观察的第一句话，其实是字对字在描述:lang()部分同款的副本 。

然而，:lang()的大部分其他文字都是新的，因为与:dir()一起，选择器4还为:lang()引入了增强功能。

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

既然您对上一个问题的回答是他们的行为不同，表现无关。

由于伪类和属性选择器具有同等特异性，所以不会产生特异性影响。

---

_{这不是很清楚，我为什么花了近15年的:dir()被添加到选择器，但你去那里。}