В HTML и псевдокласс :lang(), и селектор атрибута будут сопоставлять элемент с соответствующим атрибутом lang.
Разница в том, что браузер может иметь другие способы определения языка данного элемента при тестировании с псевдоклассом :lang(), который может определяться языком документа и / или реализацией, тогда как селектор атрибута будет только проверить элемент на с данным атрибутом без какой-либо сопутствующей семантики на основе документа.
Например, в HTML псевдокласс также будет соответствовать любому из потомков элемента, для которого нет другого lang, в зависимости от того, как браузер определяет язык для этих потомков. Обычно потомки наследуют атрибут языка от своего предка, если он не установлен явно.
Вот что говорит spec :
Разница между :lang(C) и оператором '| =' заключается в том, что оператор '| =' выполняет сравнение только с данным атрибутом элемента, тогда как псевдокласс :lang(C) использует знания UA о семантика документа для выполнения сравнения.
В этом примере HTML, только BODY соответствует [lang|=fr] (потому что он имеет атрибут LANG), но и BODY, и P соответствуют :lang(fr) (потому что оба на французском языке). P не соответствует [lang|=fr], поскольку у него нет атрибута LANG.
<body lang=fr>
<p>Je suis français.</p>
</body>
Обратите внимание на конкретные фразы "имеет атрибут LANG" и "на французском". Эти две фразы имеют совершенно разные значения в английском, как вы можете себе представить.
В вашем примере следующий селектор также будет соответствовать вашему элементу .foo:
.foo:lang(en)
Но следующие селекторы не будут, если у него нет собственного установленного атрибута lang:
.foo[lang="en"]
.foo[lang|="en"]
Что касается поддержки браузеров, псевдокласс :lang() поддерживается начиная с IE8, поэтому IE7 - единственный браузер, который вы не сможете поддерживать, используя псевдокласс над селектором атрибутов.
Основываясь на этом понимании, вы можете ответить на вопрос «который я должен использовать»: вы всегда должны использовать псевдокласс :lang() по умолчанию , если только нет определенных причуд (или необходимости поддерживать IE7 ) требуется обойти, используя вместо этого селектор атрибутов.
Селекторы 4 не только предоставляют расширенные функциональные возможности псевдоклассу :lang() (тем самым увеличивая разрыв в функциональности между ним и селекторами атрибутов), но также вводят псевдо- :dir() класс для сопоставления элементов в зависимости от их направленности. Поскольку направленность является языковым свойством, атрибуты dir и lang работают аналогично в HTML, а разница между :dir() и соответствующим селектором атрибута аналогична разнице между :lang() и соответствующим селектором атрибута - to точка, в которой первое предложение следующей цитаты фактически является дословной копией того же абзаца в разделе, описывающем :lang():
Разница между: dir (C) и '' [dir = C] '' в том, что '' [dir = C] '' выполняет сравнение только с данным атрибутом элемента, тогда как: dir (C ) псевдокласс использует знание UA семантики документа для сравнения. Например, в HTML направленность элемента наследуется, поэтому дочерний элемент без атрибута dir будет иметь ту же направленность, что и его ближайший предок с допустимым атрибутом dir. В качестве другого примера, в HTML элемент, соответствующий '' [dir = auto] '', будет соответствовать либо: dir (ltr), либо: dir (rtl) в зависимости от разрешенной направленности элементов, определяемой его содержимым. [HTML5]