CSS :lang 伪类 vs 属性选择器答案

【问题标题】：CSS :lang pseudo class vs attribute selectorCSS :lang 伪类 vs 属性选择器
【发布时间】：2026-01-20 12:05:02
【问题描述】：

我想编写一个 CSS 规则，该规则将对不同语言的引号使用不同的引号。我知道lang是一个HTML属性，那为什么我不能使用下面的css属性选择器呢？下面的代码不应该针对具有lang 属性且具有sk 值的元素内的所有q 和blockqutote 元素吗？

[lang=sk] q,
[lang=sk] blockquote {
    quotes: "-" "-";
}

我知道下面的代码有效，但我不太明白为什么上面的代码无效。这个例子使用了伪类，这对我来说不是很直观。原因可能是lang同时是一个html属性，这让我有点困惑。

:lang(sk) q,
:lang(sk) blockquote {
    quotes: "-" "-";
}

提前感谢您为我解决这个问题。

【问题讨论】：

标签： css

【解决方案1】：

:lang(x) 比[lang=x] 更接近[lang|=x]，但它们仍然不同，因为:lang 指的是内容而不是元素。描述差异的最清晰方法是通过CSS spec 中的示例：

注意 [lang|=xx] 和 :lang(xx) 之间的区别。在这个 HTML 例如，只有 BODY 匹配 [lang|=fr] （因为它有一个 LANG 属性）但 BODY 和 P 都匹配 :lang(fr) （因为两者是法语）。

<body lang=fr>
  <p>Je suis Français.</p>
</body>

【讨论】：

你能举个例子来说明区别吗？
好的，我明白了——这里是a demo——当使用:lang时，每个孩子都会得到边框
@Danield：:lang 和*:lang 是一回事吗？我仍然对语法有些困惑，因为我被告知伪选择器用于定位处于某种状态的元素。令我困惑的是，: 之前什么都没有。
@Peter - 是的，:lang 和 *:lang 是相同的。特别是在5.3 Universal selector 下，规范说“如果通用选择器不是简单选择器的唯一组件，则可以省略“*”。”
@Alohci：那么:lang(sk) q 没有多大意义，不是吗？如果我只想以sk 语言定位q 标签，它应该是q:lang(sk)，对吧？