CSS3 :: selection擬似要素はすべての子要素にも適用されますか？

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スタイルは確かにないは（あなたのフィドルに、それはdiv#test::selectionだ）子の::selectionによって継承されます例です。継承はCSSで動作するため、疑似要素は、その実際の要素が何らかの方法で親または子として関連していても、他の疑似要素から継承することはできません。ネストされた選択項目の問題は、this CSS WG mailing list threadでより深くカバーされました。擬似要素は、あなたの<div>秒の両方を含む、すべての要素に適用されるため

あなた::selectionスタイルが働く理由はあります。

これに対する簡単な解決策は、コンビネータを使って単純なセレクタの残りの部分から::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に戻ることを望んでいます。}