选择器[lang="en"] vs selector:lang(en-US)

Question

我一直在阅读 The language (lang) pseudo-class 并想知道使用属性选择器可以实现相同的效果。以下两段代码实现相同的效果：

使用属性选择器：

<style>
p[lang="en-US"] 
{
 color: red;
}
</style>
<p lang="en-US">A paragraph of American text, gee whiz!</p>

使用语言（lang）伪class:

<style>
p:lang(en-US)
{
 color: red;
}
</style>
<p lang="en-US">A paragraph of American text, gee whiz!</p>

那么，它们是等价的吗？如果是，那么如果属性选择器已经可以实现相同的目标，那么需要什么来使 lang 伪 class？

Answer 1

使用属性选择器，您只能匹配特定元素的属性。语言信息被继承。

p:lang(en-US)
{
 color: blue;
}

<div lang="en-GB">
  <p>Blue is the colour</p>
</div>

<div lang="en-US">
  <p>Blue is the color</p>
</div>

请注意，您不能为此使用后代组合器，因为语言可以嵌套。

selector[lang="en"] vs selector:lang(en-US)