selector [lang =＆＃34; en＆＃34;] vs selector：lang（en-US）

Question

我一直在阅读关于语言（lang）伪类的内容，并想知道使用属性选择器可以实现相同的效果。以下两个代码都达到了相同的效果：

使用属性选择器：

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

使用语言（lang）伪类：

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

那么，它们是否相同？如果是，那么如果使用属性选择器已经可以实现相同的那么需要制作lang伪类吗？

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

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