css - ::selection 文本颜色的两个 CSS 规则 - 为什么不能同时选择它们？

Question

::selection如果按以下方式编写，更改文本颜色的代码可以正常工作：

HTML：

<p>This is a paragraph.</p>

CSS：

p::selection { // This works
  color:#ff0000;
}

p::-moz-selection { // This works
  color:#ff0000;
}

但是，如果我将这两个CSS规则放在同一行，如下所示，它不起作用：

HTML：

<p>This is a paragraph.</p>

CSS：

p::selection, p::-moz-selection { // // This does not work
  color:#ff0000;
}

为什么这不起作用？CSS在同一行写两个不同的规则是什么规则？

score 5 · Accepted Answer

“在同一行写两条不同的 CSS 规则是什么规则？”

通常，您在上面尝试的多项选择（使用逗号分隔符）很好，例如

div, p { 
  background-color:red;     
}

“为什么这不起作用？”

然而，在::selection's 的情况下，情况有所不同。

看看下面来自 Mozilla 的引述，了解为什么它不能像我们通常期望的那样工作的原因：

“由于 CSS 解析规则需要在遇到无效伪元素时删除整个规则，因此必须编写两个单独的规则：::-moz-selection, ::selection {...}。该规则将在非 Gecko 浏览器上被删除，因为::-moz-selection它们在它们上无效。”

score 3 · Accepted Answer

这是因为::selection对 Gecko::-moz-selection无效，对其他人无效。因此，当您编写时p::selection, p::-moz-selection，由于 CSS 解析规则，每个浏览器都会发现无效的选择器并关闭整个规则。

2 回答 2