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

问题描述 投票:2回答:2

我正在使用此代码:

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

css css-selectors selection
2个回答
2
投票

您的div#wrapper.Red::selection样式确实将不是被任何子级的::selection继承(在您的小提琴中是div#test::selection)。由于CSS中继承的工作方式,即使伪元素的真实元素在某种程度上与父元素或子元素相关,伪元素也不能从其他伪元素继承。 this CSS WG mailing list thread中更深入地介绍了嵌套选择的问题。1

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


1 这也是::selectiondropped from CSS UI 3的原因之一。希望它经过进一步测试和定义后能在UI 4中返回。


0
投票

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

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

它适用于Firefox和Chrome。

© www.soinside.com 2019 - 2024. All rights reserved.