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僞元素是否也適用於所有子元素？

回答

相關問題