Применяется ли псевдоэлемент CSS3 :: selection ко всем дочерним элементам? - PullRequest
Новая
       24

Применяется ли псевдоэлемент CSS3 :: selection ко всем дочерним элементам?

2 голосов
/ 15 марта 2012

Я использую этот код: 

::-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 ко всем дочерним элементам (т.е. мой селектор неверен) или это невозможно??

Вот пример в ответ на jsFiddle от BoltClock

http://jsfiddle.net/6DBhV/1/

1 Ответ

1 голос
/ 15 марта 2012

Ваши div#wrapper.Red::selection стили действительно не будут наследоваться ::selection любого потомка (в вашей скрипке это div#test::selection). Из-за того, как наследование работает в CSS, псевдоэлементы не могут наследовать от других псевдоэлементов, даже если их настоящие элементы так или иначе связаны с родителями или детьми. Вопрос о вложенных выборках был рассмотрен гораздо глубже в этой ветке списка рассылки CSS WG . 1

Причина, по которой работает ваш стиль ::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; }

Обновленная скрипка

1 Это также одна из причин, по которой ::selection был удален из CSS UI 3 . Мы надеемся, что он вернется в пользовательском интерфейсе 4 после того, как будет дополнительно протестирован и определен.

...