我正在使用此代码:
::-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的示例
您的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; }
1 这也是::selection
为dropped from CSS UI 3的原因之一。希望它经过进一步测试和定义后能在UI 4中返回。
要应用/包括所有子元素,这是我的解决方案:
div#wrapper > * ::selection,
div#wrapper > * ::-moz-selection {
background-color: #c92127;
}
它适用于Firefox和Chrome。