В чем разница между E: dir (dir) и E [dir = "dir"] в CSS?

Question

W3C вводит новый псевдо-класс для обнаружения направления в селекторах 4. Я интересно, в чем разница между этим и нормальным селектором атрибута:

CSS2 - селектор атрибута

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

Селекторы 4 - реж псевдо-класс

E:dir(rtl) { ... } 

есть ли конкретная причина для создания нового псевдо- класс для этого? Являются ли эти селекторы идентичными или ведут себя по-разному? Имеются ли какие-либо результаты или специфические последствия?

Answer 1

Согласно MDN, некоторые тонкие различия существуют:

: каталог CSS псевдо-класс соответствует элементы на основе направленности текста, содержащегося в нем. В HTML направление определяется атрибутом dir. Для других типов документов могут быть другие методы документа для определения языка.

Обратите внимание, что использование псевдо-класса: dir() не эквивалентно с использованием селекторов атрибутов [dir = ...]. Последнее соответствует значению и не соответствует, если атрибут не установлен, даже если в этом случае элемент наследует значение его родительского элемента; Аналогично [dir = rtl] или [dir = ltr] не будет соответствовать автоматическому значению, которое может использоваться в атрибуте dir . В противоположном случае: dir() будет соответствовать значению, вычисленному на UA, наследуемому или автоматическому значению.

Также: dir() рассматривает только семантическое значение направленности, тот, который определен в документе, большую часть времени в HTML. Это не будет рассмотреть направленность направления, тот, который задан свойствами CSS, как направления, которые являются чисто стилистическими.

Answer 2

Есть ли конкретная причина для создания нового псевдо-класс для этого?

По этой же причине наряду с селекторами атрибутов в CSS2 была введена псевдокласс класса :lang(). См What's the difference between html[lang="en"] and html:lang(en) in CSS?

ли эти селекторы идентичны или же они ведут себя по-разному?

См. Мой ответ на связанный вопрос. Вот соответствующая цитата из Selectors 4 для полноты картины:

Разницы между: Dir (С) и «» [Dir = С] «» является то, что «» [DIR = С] «» выполняет лишь сравнение с данным атрибутом для элемента, в то время как псевдокласс class: dir (C) использует знания UA для семантики документа для выполнения сравнения.Например, в HTML направленность элемента наследует так, что дочерний элемент без атрибута dir будет иметь ту же направленность, что и его ближайший предок с действительным атрибутом dir. В качестве другого примера, в HTML, элемент, который соответствует '' [dir = auto] '', будет соответствовать: dir (ltr) или: dir (rtl) в зависимости от разрешенной направленности элементов, определяемой его содержимым. [HTML5]

Чтобы управлять точки дома на сходстве :dir() и :lang(), если присмотреться, первое предложение является фактически слово за слово копию того же пункта в разделе, описывающем :lang() ,

Большая часть остальной части текста для :lang() является новой, однако, поскольку наряду с :dir(), селектор 4 также вводит расширенную функциональность для :lang().

Есть ли какие-либо результаты или конкретные последствия?

Поскольку ответ на ваш предыдущий вопрос заключается в том, что они ведут себя по-другому, производительность не имеет значения.

Специфические последствия, поскольку псевдоклассы и селектор атрибутов имеют одинаковую специфику.

---

_{Это мне не понятно, почему потребовалось почти 15 лет для :dir() быть добавлены к селекторов, но там вы идете.}