Размещение текста и содержания веб-сайта с помощью HTML-кода - это только один «фрагмент» построения. передняя часть веб-сайта. Еще одна важная часть этого процесса - создание визуального стиля, который регулируется правила CSS.
Каждый раз, когда мы создаем новый веб-сайт или вносим серьезные изменения в макет существующего, мы неизбежно хотим, чтобы определенные части нашего веб-сайта выглядели определенным образом. Для этого важно понимать, как использовать различные Комбинаторы CSS, например, селектор потомков CSS. Этот комбинатор CSS позволяет большим разделам веб-сайта сразу получать одни и те же изменения стиля.
Что такое селектор потомков CSS?
Селектор потомков CSS - это один из четырех комбинаторов CSS. При добавлении одного пробела () между двумя селекторами одинаковые элементы стиля будут применяться и ко второму селектору, учитывая, что потомки используют один и тот же первый селектор.
Чтобы понять селектор потомков CSS, вам сначала нужно понимать селекторы CSS. Лучший способ описать селектор - это то, что это оператор CSS, который идентифицирует фрагмент HTML, который вы пытаетесь стилизовать. Он называется селектором, потому что он «выбирает» любой бит HTML, имеющий тот же оператор, что и родительский элемент CSS.
Типичные примеры таких операторов:
div
Это тег, который определяет раздел HTML, который может включать такие вещи, как абзацы и контент, или:
Ли
который представляет собой упорядоченный список. Еще один похожий тег:
ул
Это создает неупорядоченный список. Более сложные шаблоны также называются селекторами. Проще говоря, селектор потомков CSS сообщает веб-сайту, как он должен выглядеть, когда один селектор «вложен» под общего предка.
Первый селектор становится родительским элементом CSS или селектором «предок», а второй селектор становится потомком. Подумайте о том, как работает файловый каталог: родительский CSS подобен папке, содержащей другие папки, которые могут содержать собственные папки.
Из четырех комбинаторов единственный, который выбирает все, что вложено под конкретный родительский элемент CSS, - это селектор потомков CSS. Есть еще три комбинатора.
- Дочерний селектор (‘>’ вместо одиночного пробела) выбирает только элементы, на которые ссылается первый селектор в комбинаторе. Если первый селектор (div), а второй селектор (p), выбирается только (p), если он имеет (div) в качестве предка. Если абзац создается в новом (разделе), даже если он находится в том же (div), правила стиля не сохраняются.
- Соседний родственный селектор («+» вместо одиночного пробела) выбирает только элемент, ближайший ко второму селектору в комбинаторе. Если первый селектор (div), а второй селектор (p), выбирается первый элемент, который использует (p), но не (div).
- Общий родственный селектор («~» вместо одного пробела) выбирает все элементы, кроме тех, на которые ссылается второй селектор. Если первый селектор (div), а второй селектор (p), выбирается каждый элемент, кроме (p).
Как выглядит селектор потомков CSS?
В следующем примере двух разных селекторов потомков CSS, работающих бок о бок, (div) равен первый селектор в первом комбинаторе, тогда как (ul) - первый селектор во втором комбинатор. В обоих селекторах потомков CSS (p) используется в качестве второго селектора.
Элементы стиля различаются между (div) и (ul), но (p) явно несет черты своего родителя CSS в обоих случаях.
Зачем использовать селектор потомков CSS?
Чтобы понять важность селектора потомков CSS, полезно сначала понять вложенные селекторы CSS.
Обычно мы хотим, чтобы определенные правила стиля применялись ко всему веб-сайту, например, определенный размер или шрифт, который используется по умолчанию для всего текста абзаца (p). Точно так же HTML может начать выглядеть беспорядочно, если эти правила стиля применяются для каждого отдельного абзаца, а не для всего веб-сайта.
Вложенный CSS возможен за счет использования комбинаторов CSS, таких как селектор потомков CSS. «Вложив» CSS под родительский селектор, можно быстро и эффективно сообщить веб-сайту как должен выглядеть конкретный селектор в каждом сценарии, на который ссылается родительский CSS.
Использование вложенного селектора CSS позволяет нам применять одни и те же правила для стилизации нескольких разделов сайта одновременно, позволяя нам обойтись меньшими затратами усилий, сохраняя при этом наш HTML-код чистым и нетронутым.