css - CSS3::selection 伪元素是否也适用于所有子元素？

Question

我正在使用此代码:

::-moz-selection { background: #c92127; color: #fff; text-shadow: none; }
::selection { background: #c92127; color: #fff; text-shadow: none; }

现在我想在某个 div 内的任何元素上使用它。

我的包装器代码是

<div id="wrapper" class="Red">

所以我用这个作为我的 CSS 选择器

div#wrapper.Red::-moz-selection { background: #c92127; color: #fff; text-shadow: none; }
div#wrapper.Red::selection { background: #c92127; color: #fff; text-shadow: none; }

但这不起作用。当我只使用这个问题顶部的选择代码时，它确实有效。

所以我的问题是: ::selection 是否适用于所有子元素(即我的选择器是错误的)或者这是不可能的？

这里是响应 BoltClock 的 jsFiddle 的示例

http://jsfiddle.net/6DBhV/1/

Answer 1

您的div#wrapper.Red::selection ::selection 确实不会继承样式。任何 child 的(在你的 fiddle 中，它是 div#test::selection )。由于继承在 CSS 中的工作方式，伪元素不能从其他伪元素继承，即使它们的真实元素以某种方式作为父元素或子元素相关。 this CSS WG mailing list thread 中更深入地讨论了嵌套选择的问题。 .¹

你的::selection的原因style 起作用是因为伪元素应用于所有元素，包括您的 <div> s。

一个简单的解决方案是将 ::selection 分开从其余的简单选择器和组合器中:

/* Notice the space here - the descendant combinator */
div#wrapper.Red ::-moz-selection { background: #c92127; color: #fff; text-shadow: none; }
div#wrapper.Red ::selection { background: #c92127; color: #fff; text-shadow: none; }

Updated fiddle

---

¹ _{这也是::selection的原因之一是dropped from CSS UI 3 。希望它在经过进一步测试和定义后能够在 UI 4 中回归。}