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

我使用这个代码：CSS3 :: selection伪元素是否也适用于所有子元素？

::-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/

来源

2012-03-15 Undefined

您是否确定添加':: - moz-selection'版本以防您在Firefox中测试这个版本？您是否使用与第一个代码块相同的样式？ – BoltClock 2012-03-15 15:47:02

我做的是，我会编辑问题以使其更清晰 – Undefined 2012-03-15 15:47:35

您的选择器应该可以工作（反正文本和背景颜色，而不是文本阴影）：http://jsfiddle.net/BoltClock/6DBhV即使您有一组在你的第一个代码块中，''selection''风格的基础，更具体的应该仍然工作。你能举出一个测试案例或向我们展示更多代码吗？ – BoltClock 2012-03-15 15:49:29

你div#wrapper.Red::selection风格确实会不任何儿童的::selection继承（在你的小提琴，这是div#test::selection）的例子。由于CSS的继承方式，伪元素不能从其他伪元素继承，即使它们的真实元素以某种方式作为父母或孩子相关。嵌套选择的问题在this CSS WG mailing list thread中有更深入的讨论。

为什么你::selection风格的作品的原因是因为伪元素被应用于所有元素，包括你的<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中回归。}

来源

2012-03-15 16:04:59 BoltClock

非常感谢BoltClock的忠告 – Undefined 2012-03-15 16:07:42

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

回答

相关问题