Выберите все дочерние элементы рекурсивно в CSS

407

Как вы можете выбрать все дочерние элементы рекурсивно?

div.dropdown, div.dropdown > * {
    color: red;
}

Этот класс только выбрасывает класс на определенное className и всех непосредственных потомков. Как вы можете простым способом выбрать все дочерние узлы, как это:

div.dropdown, 
div.dropdown > *, 
div.dropdown > * > *, 
div.dropdown > * > * > *, 
div.dropdown > * > * > * > * {
    color: red;
}

css css-selectors clarkk
источник

Ответы:

621

Используйте пробел, чтобы соответствовать всем потомкам элемента:

div.dropdown * {
    color: red;
}

x yсоответствует каждому элементу y, который находится внутри x , каким бы глубоким он ни был - дети, внуки и так далее.

Звездочка *соответствует любому элементу.

Официальная спецификация: CSS 2.1: глава 5.5: потомки селекторов

anroesti
источник

это работает, но теперь он переопределяет все другие классы, даже если они имеют более высокий приоритет .. (они помещаются позже в файл css)

clarkk

Селектор также играет роль в том, какой приоритет имеют свойства, а не только где в файле они появляются. Вы можете попробовать добавить `! color: red !important;

Important`

Я знаю, это немного некрасиво. Вместо этого вы можете попробовать написать более точные селекторы, скорее всего, это тоже сработает. (например, #head ul→ #head ul#navi)

анроэсти

Ладно, очень простой пример: p.xyважнее p, потому что он более специфичен. jsfiddle.net/ftJVX

anroesti

Что делать, если я хочу, чтобы все дети имели определенный класс?

MEM

144

Правило следующее:

A B

B как потомок A

A > B

B как ребенок от A

Так

div.dropdown *

и не

div.dropdown > *

Абденнур ТУМИ
источник