Question

我有一些我想要清理的旧CSS。写这篇文章的人无法进行咨询。以下规则不验证（CSS 2.1）：

html[lang=en] q: before, : lang(en) q: before {
    content: "“";
}

假设作者的意思是以下（此验证）是否安全：

html[lang=en] q:before, q:lang(en):before {
    content: "“";
}

此外，第一个选择器是否与第二个选择器有任何不同？每个特定于某个浏览器吗？

感谢。

Answer 1

此选择器似乎不适用于Firefox：

: lang(en) q: before

可能应该是

:lang(en) q:before

与

不一样

q:lang(en):before

您可以通过以下测试用例看到这一点：

:lang(en) q:before {
  content: "a";
}
q:lang(en):before {
  content: "b";
}

<div lang="en">
<q lang="zh">Hello zh</q> <q lang="en">Hello EN</q> <q>Hello Plain</q>
</div>

这给出了

 a"Hello zh" b"Hello EN" b"Hello Plain"

基本上:lang(en) q:before规则说“在使用英语的任何元素中的任何Q之前”，而q:lang(en):before说“在英语语言中的任何Q之前”。

此外，使用的两个选择器（html[lang=en] q:before和:lang(en) q:before）并不完全等效，但如果相关浏览器理解其中一个选择器，则大多数时间都会达到相同的效果。：lang（en）是一个较新的选择器，用于标识语言，而html [lang = en]是一个属性选择器，仅标识一些名为lang的属性。

Answer 2

这肯定是错误的：

before, : lang(en)

, :不能像这样使用，逗号表示新的“规则”，冒号表示伪属性（如a:link中所示）。

P.S。 content和before在IE中工作吗？

在CSS中做引号

2 个答案: