Узнайте, что такое селектор потомков CSS

Структура HTML-документа похожа на семейное дерево. В вашей семье у вас есть ваши родители и другие люди, которые пришли вам. Это ваши предки. Дети и те, кто идет за тобой на этом дереве, являются вашими потомками. HTML работает аналогичным образом. Элементами, находящимися внутри других элементов, являются их потомки. Например, поскольку почти каждый элемент HTML находится внутри теги, они были бы потомком этого элементы. Эта взаимосвязь важна для понимания, когда вы начинаете работать с CSS и должны настраивать конкретные элементы для применения визуальных стилей.

Селекторы потомков CSS

Селектор потомков CSS применяется к элементам, которые находятся внутри другого элемента (или более точно указано, элемент, который является потомком другого элемента). Например, неупорядоченный список имеет тег с тегами в качестве потомков. В качестве примера воспользуемся следующим HTML:

• это ссылка

LI теги являются потомками UL тег. тег является потомком и то и другое LI (дочерний потомок) и UL (потомок внука). Если вы думаете об этом, используя пример генеалогического дерева,

будет родителем,
• был бы дочерним элементом этого элемента, и он был бы ребенком
• и внуком
  .

  Итак, как бы вы ориентировали определенные элементы на веб-странице с помощью этих селекторов-потомков? Во-первых, вы должны определить селекторов-потомков, используя два (или более) типа селекторов, разделенных пробелами.

  li a {text-decoration: none; }

  В этом примере стили будут применяться только к элементу link (), который является потомком элемента списка элементов (

  • ). Все остальные ссылки на странице, которые не являются потомками элемента списка, не будут получать этот стиль.

    Важно помнить, что не имеет значения, сколько тегов они находятся между тегами, которые вы можете использовать в селекторе потомков. Если второй элемент заключен в любом месте первого элемента, он будет выбран как потомок.

    Если вы хотите выбрать все якоря, которые спускаются из элементов ul, вы должны написать:

    ul a {text-decoration: none; }

    Теперь эти стили будут применяться к любой ссылке, которая является потомком элемента списка. Вы также можете написать этот селектор

    ul li a {text-decoration: none; }

    Это селектор потомков, который использует более двух селекторов типов. В этом случае это относится к ссылкам, которые находятся внутри элемента списка, а также внутри неупорядоченного списка.

    Использование селекторов классов и идентификаторов

    Селекторы, от которых вы спускаетесь, не обязательно должны быть потомками типов. Например, представьте, что у вас была область сайта (например, подразделение) с атрибутом ID «рекламный щит». Вы можете настроить селектор потомков этого идентификатора:

    #billboard ul {background-color: #ccc; }

    Это создало бы неупорядоченный список, который является потомком элемента с идентификатором «рекламного щита». Вы можете сделать то же самое для значений класса.

    div.billboard ul {background-color: #ccc; }

    Это предполагает, что деление имеет значение класса «рекламный щит». CSS выше будет

    элемент внутри любого деления, который имеет это значение класса.

    Вы можете быть очень тяжелыми и многословными с селекторами потомков. Например, если вы используете Dreamweaver для написания вашего HTML-кода, есть параметр, когда вы добавляете новые правила CSS, которые автоматически создадут селектор, основываясь на размещении вашего курсора на этой странице. Что Dreamweaver делает в этих случаях, создает дико многословный и длинный селектор потомков. Эта особенность не нужна для работы CSS. То, что вы хотите сделать, - найти баланс между селектором-потомком, который достаточно специфичен, чтобы вы могли развернуть до нужных вам элементов (без стилей, на которые вы не хотите влиять), не имея правил CSS, у которых есть селектора, которые чрезмерно большой.