::选择文本颜色的两个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在同一行中写两条不同规则的规则是什么？

Answer 1

"在同一行中编写两个不同的CSS规则有什么规则？"

通常,上面尝试的多次选择(使用逗号分隔符)很好,例如

div, p { 
  background-color:red;     
}

"为什么这不起作用？"

::selection然而,在情况下,事情有点不同.

看一下Mozilla的以下引用,说明为什么这不起作用的原因,正如我们通常所期望的那样:

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