Question

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

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

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

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

提前感谢您为我清理这件事。

Answer 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>