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

407

Як ви можете обрати всі дочірні елементи рекурсивно?

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

Цей клас лише кидає клас на визначений className та всіх безпосередніх дітей. Як ви можете, простим способом, вибрати всі подібні дочірні доріжки:

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

css css-selectors

— кларк
джерело

621

Використовуйте пробіл, щоб відповідати всім нащадкам елемента:

div.dropdown * {
    color: red;
}

x yвідповідає кожному елементу y, який знаходиться всередині x , якою б глибоко вкладеною він не був - діти, онуки тощо.

Зірочка *відповідає будь-якому елементу.

Офіційна специфікація: CSS 2.1: Розділ 5.5: Вибірці нащадків

— anroesti
джерело

він працює, але тепер він переосмислює всі інші класи, навіть якщо вони мають вищий пріоритет .. (вони розміщуються пізніше у файлі css)

— clarkk

Селектор також грає роль у тому, який пріоритет мають властивості, а не лише де у файлі вони з’являються. Ви можете спробувати додати "! Важливо" до ваших цінностей, наприкладcolor: red !important;

— anroesti

Я знаю, це трохи некрасиво. Ви можете замість цього спробувати написати більш точні селектори, ймовірно, це також спрацює. (наприклад, #head ul→ #head ul#navi)

— anroesti

Гаразд, дуже базовий приклад: p.xyважливіший ніж p, тому що він на зразок більш конкретний. jsfiddle.net/ftJVX

— anroesti

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

— MEM

144

Правило таке:

A B

Б як нащадок А

A > B

Б як дитина А

Тому

div.dropdown *

і ні

div.dropdown > *

— Abdennour TOUMI
джерело