Селектор-потомок в 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. Это ужасно дорого, особенно если селектор находится в тегах или универсальных категориях.
Но только по сравнению с другими селекторами. Он по-прежнему невероятно быстр, и вы, вероятно, никогда этого не заметите, если не сойдете с ума.
Поддержка браузера
Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
---|---|---|---|---|---|---|
Любой | Любой | Любой | Любой | Любой | Любой | Любой |