Селектор нащадків у CSS - це будь-який селектор з пробілом між двома селекторами без комбінатора. Ось кілька прикладів:
ul li ( ) header h2 ( ) footer a ( ) .module div ( ) #info-toggle span ( ) div dl dt a ( )Візьмемо ul li ( )для прикладу. Це означає "будь-який елемент списку, який є нащадком невпорядкованого списку".
Нащадок означає будь-де, вкладене в нього в дерево DOM. Може бути прямою дитиною, може бути глибиною п’ять рівнів, це все ще нащадок. Це відрізняється від дочірнього комбінатора (>), який вимагає, щоб елемент був наступним вкладеним рівнем вниз.
Для ілюстрації div span ( )буде відповідати:
I will match
- I will match too
Вам, мабуть, не слід над цим турбуватися, але спадковий селектор є досить «дорогим» - тобто важким / повільним для рендеринга двигунів, щоб розібратися та робити щось інше. MDN:
Селектор нащадків - найдорожчий селектор у CSS. Це жахливо дорого, особливо якщо селектор входить до категорії тегів або універсальної категорії.
Але лише порівняно з іншими селекторами. Це все ще надзвичайно швидко, і ви, мабуть, ніколи цього не помітите, якщо не зійдете з розуму.
Підтримка браузера
| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Будь-який | Будь-який | Будь-який | Будь-який | Будь-який | Будь-який | Будь-який |