html - 选择器 [lang ="en"] 与选择器 :lang(en-US)

<分区>

我一直在阅读有关 The language (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 伪类，那么还需要什么？

最佳答案

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

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>

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

关于html - 选择器 [lang ="en"] 与选择器 :lang(en-US)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35684506/

相关文章：

css - 使用 CSS 为背景图像添加色调