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()被添加到選擇器，但你去那裏。}