在 CSS 中做引号答案

【问题标题】：Doing quotes in CSS在 CSS 中做引号
【发布时间】：2009-09-09 04:01:24
【问题描述】：

我有一些遗留的 CSS 想要清理。写的人不可以商量。以下规则无效 (CSS 2.1)：

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

可以安全地假设作者的意思如下（这验证了）：

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

另外，第一个选择器与第二个选择器有什么不同吗？每个浏览器都特定于某个浏览器吗？

谢谢。

【问题讨论】：

标签： css css-selectors

【解决方案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 的属性。

【讨论】：

【解决方案2】：

这绝对是错误的：

before, : lang(en)

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

附： content 和 before 在 IE 中工作吗？

【讨论】：

好问题！他们没有。我什至不确定为什么要包含该规则，因为标记目前没有在网站上的任何地方使用。可能以防将来使用。