Структура HTML-документа похожа на семейное древо. В вашей семье есть ваши родители и другие, которые были до вас. Это твои предки. Дети и те, кто идут за тобой на этом дереве, — твои потомки. HTML работает аналогичным образом. Элементы, которые находятся внутри других элементов, являются их потомками. Например, поскольку почти каждый элемент HTML находится внутри тегов, они будут потомками этих элементов. Это отношение важно понимать, когда вы начинаете работать с CSS, и вам нужно ориентироваться на определенные элементы, чтобы применять визуальные стили.
Селекторы потомков CSS
Селектор потомков CSS применяется к элементам, которые находятся внутри другого элемента (или, точнее, элемента, который является потомком другого элемента). Например, в неупорядоченном списке есть тег с тегами в качестве потомков. Давайте использовать следующий HTML в качестве примера:
- это ссылка
теги являются потомками
тег.
тег является потомком
(потомок ребенка) и
(потомок внука) теги. Если вы думаете об этом на примере генеалогического древа,
- будет дочерним элементом этого элемента, и будет дочерним элементом
- и внук
- .
Итак, как бы вы нацеливали определенные элементы на веб-странице с помощью этих потомков? Сначала вы должны определить селекторы-потомки, используя два (или более) селектора типа, разделенных пробелами.
li a {
текстовое оформление: нет;
}
В этом примере стили будут применяться только к элементу link (), который является потомком элемента list-item (
Важно помнить, что не имеет значения, сколько тегов они находятся между тегами, которые вы можете использовать в селекторе-потомке. Если второй элемент заключен в любом месте первого элемента, он будет выбран в качестве потомка.
Если вы хотите выбрать все якоря, которые произошли от элементов ul, вы должны написать:
ul a {
текстовое оформление: нет;
}
Теперь эти стили будут применяться к любой ссылке, которая является потомком элемента списка. Вы также можете написать этот селектор
ul li a {
текстовое оформление: нет;
}
Это селектор потомков, который использует более двух селекторов типов. В этом случае это будет применяться к ссылкам, которые находятся внутри элемента списка, а также внутри неупорядоченного списка.
Использование селекторов классов и идентификаторов ID
Селекторы, от которых вы уходите, не всегда должны быть потомками типа. Например, представьте, что у вас есть область сайта (например, разделение) с атрибутом идентификатора «billboard». Вы можете настроить селектор потомков с этого идентификатора:
#billboard ul {
цвет фона: #ccc;
}
Это будет стиль неупорядоченного списка, который является потомком элемента с идентификатором «billboard». Вы можете сделать то же самое для значений класса.
div.billboard ul {
цвет фона: #ccc;
}
Это предполагает, что у подразделения есть классовое значение «рекламный щит». Приведенный выше CSS будет стилизовать
- элемент внутри любого подразделения, которое имеет значение этого класса.
Вы можете получить действительно сложный и многословный с потомками селекторов. Например, если вы используете Dreamweaver для написания своего HTML-кода, есть настройка, когда вы добавляете новые правила CSS, которые будут автоматически создавать селектор на основе расположения вашего курсора на этой странице. В этом случае Dreamweaver создает чрезвычайно подробный и длинный селектор потомков. Эта особенность не обязательна для работы вашего CSS. То, что вы хотите сделать, — это найти баланс между селектором-потомком, который достаточно специфичен, чтобы вы могли перейти к точным элементам, которые вам нужны (без стилизации, на которые вы не хотите влиять), не имея CSS-правил, которые имеют чрезмерно селекторы большой.
