Ответ 1
В 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]