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继承（在你的小提琴中，它是div#test::selection）。由于继承在CSS中的工作方式，伪元素不能从其他伪元素继承，即使它们的真实元素在某种程度上与父母或孩子相关。 this CSS WG mailing list thread中更深入地介绍了嵌套选择的问题。¹

::selection样式的工作原因是因为伪元素应用于所有元素，包括<div>个。

一个简单的解决方案是使用组合器将::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中返回。}

Answer 2

要应用/包括所有子元素，这是我的解决方案：

div#wrapper > * ::selection, 
div#wrapper > * ::-moz-selection {
    background-color: #c92127;
}

它适用于Firefox和Chrome。

参考：CSS * Selector和 CSS element>element Selector

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

2 个答案: