Потомок - CSS-хитрости

Anonim

Селектор-потомок в 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
Любой Любой Любой Любой Любой Любой Любой