Псевдокласс класса CSS, который позволяет нам указывать разные стили для разных языков, например:
html:lang(en) .foo { ... }
Однако это не работает в IE7, поэтому я использовал селектор атрибутов:
html[lang="en"] .foo { ... }
Они, похоже, делают то же самое, но есть ли какие-то тонкие различия? А если нет, то почему CSS даже имеет псевдо-класс языка, когда селектор атрибутов делает то же самое?
В HTML как псевдо-класс :lang(), так и селектор атрибутов будут соответствовать элементу с соответствующим атрибутом lang.
Разница заключается в том, что браузер может иметь другие способы определения языка данного элемента при тестировании псевдо псевдокласса :lang(), который может быть определен языком документа и/или реализацией, тогда как селектор атрибутов будет проверяйте только элемент для данного атрибута без какой-либо сопутствующей семантики на основе документа.
Например, в HTML псевдокласс также будет соответствовать любому из потомков элементов, для которых нет другого lang, в зависимости от того, как браузер определяет язык для этих потомков. Обычно потомки будут наследовать атрибут языка от своего предка, если он явно не установлен.
Из spec:
Разница между
:lang(C)и оператором '| = заключается в том, что оператор' | = выполняет только сравнение с данным атрибутом в элементе, тогда как псевдокласс класса:lang(C)использует знания UAs о семантике документа для сравнения.В этом примере HTML только BODY соответствует
[lang|=fr](поскольку он имеет атрибут LANG), но и BODY, и P соответствуют:lang(fr)(потому что оба находятся на французском языке). P не соответствует[lang|=fr], потому что у него нет атрибута LANG.<body lang=fr> <p>Je suis français.</p> </body>
В вашем примере следующий селектор также будет соответствовать вашему элементу .foo:
.foo:lang(en)
Но следующие селекторы не будут, если у него нет собственного атрибута lang:
.foo[lang="en"]
.foo[lang|="en"]
Что касается поддержки браузера, поддерживается псевдокласс класса :lang(), начиная с IE8, поэтому IE7 действительно является единственным браузером, который вы не сможете поддерживать, используя псевдокласс для селектора атрибутов.
Селекторы 4 вводят псевдокласс для :dir() для сопоставления элементов на основе их направленности. Поскольку направленность - это свойство, связанное с языком, атрибуты dir и lang работают аналогично в HTML, а разница между :dir() и его соответствующим селектором атрибутов аналогична таковой между :lang() и ее соответствующим селектором атрибутов - до точка, где первое предложение следующей цитаты фактически является текстовой копией того же абзаца в разделе, описывающем :lang():
Разница между: dir (C) и '' [dir = C] '' заключается в том, что '' [dir = C] '' выполняет сравнение только с данным атрибутом элемента, а: dir (C ) псевдокласс использует знания UA для семантики документов для выполнения сравнения. Например, в HTML направленность элемента наследует так, что дочерний элемент без атрибута dir будет иметь ту же направленность, что и его ближайший предок с действительным атрибутом dir. В качестве другого примера, в HTML, элемент, который соответствует '' [dir = auto] '', будет соответствовать: dir (ltr) или: dir (rtl) в зависимости от разрешенной направленности элементов, определяемой его содержимым. [HTML5]
Еще одна вещь, которая не была упомянута кем-либо еще - :lang() pseudoclass не заинтересована в том, как задать язык элемента. В документе XHTML (true XHTML с типом XML MIME) вы можете использовать xml:lang="en", и элемент будет соответствовать :lang(en), но не [lang="en"].
Если язык документа определяет, как определяется человеческий язык элемента, можно написать селектор в CSS, который соответствует элементу на основе его языка. Например, в HTML [HTML4] язык определяется комбинацией атрибута "lang", элемента META и, возможно, информации из протокола (например, заголовков HTTP). XML использует атрибут с именем xml: lang, и для определения языка могут быть другие методы, специфичные для языка документа.
Псевдо-класс ': lang (C)' соответствует, если элемент находится на языке C. Существует ли совпадение, основанное исключительно на том, что идентификатор C равен либо или дефинированной подстроке, элемент языкового значения, так же, как если бы выполнялся оператор '| ='. Согласование C со значением языка элемента выполняется без учета регистра символов для диапазона ASCII. Идентификатор C не должен быть допустимым именем языка.
То есть:
lang.
|=, т.е. :lang(en) и :lang(us) будут соответствовать span[lang=en-us].Чувствительность атрибутов имен и значений атрибутов в селекторах зависит от языка документа.
Css поддерживает атрибуты атрибутов для всех элементов, а не только для атрибута html tags lang. Например, html как <a title="Jeeha" href="foo.html">bar</a> может быть выбран как a[title=Jeeha] { ... } в css.
Подробнее о частичных совпадениях и вариантах см. в этой ссылке.