Наследование селекторов

Home

Наследование селекторов

( 0 - user rating )

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

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

<body>
<h1> Заголовок здесь </h1>
Lorem ipsum dolor sit amet.
</body>

Если эту структуру представить в виде диаграммы, то это будет выглядеть так:

Чтоб создать css правило для элемента , нужно использовать следующий тип селектора: на странице.

em {
color:blue;
}

Но если вы будете использовать наследование, то сможете уточнить в каком случае будут действовать правила.

p em {
color:blue;
}

Если тип селектора задать таким образом, то установленные для него правила не будут действовать для внутри элемента <h1>. Стили будут распространятся только для элементов внутри абзаца .

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

<body>
Lorem ipsum dolor sit amet.
<ul>
<li> элемент списка </li>
<li> элемент списка </li>
<li> элемент списка </li>
</ul>
</body>

Используя следующее правило, можно задать стили для любого элемента , находящегося внутри элемента <ul>, при этом не затрагивая в описании элемент <li>.