Наследование селекторов используется для выбора элементов, которые являются потомками другого элемента в дереве документа.
Например, вы можете создать стиль для всех элементов <em> на странице. На странице будет допустим такая разметка:
-
<body>
-
<h1> Заголовок <em>здесь</ em> </h1>
-
<p> Lorem ipsum dolor <em>sit</ em> amet. </p>
-
</body>
Если эту структуру представить в виде диаграммы, то это будет выглядеть так:
Чтоб создать css правило для элемента <em>, нужно использовать следующий тип селектора: на странице.
-
em {
-
color:blue;
-
}
Но если вы будете использовать наследование, то сможете уточнить в каком случае будут действовать правила.
-
p em {
-
color:blue;
-
}
Если тип селектора задать таким образом, то установленные для него правила не будут действовать для <em> внутри элемента <h1>. Стили будут распространятся только для элементов <em> внутри абзаца <p>.
Вы также можете задать наследование для селетора, если он находится на втором уровне вложенности, при этом не обязательно при указании наследования упоминать второй элемент, в котором находится необходимый элемент. Эта формулировка может показатся на первый взгляд сложной для понимания, но это не так. На примере ниже будет наглядно показан этот принцип наследования.
-
<body>
-
<p> Lorem ipsum dolor <em>sit</ em> amet. </p>
-
<ul>
-
<li> элемент списка </li>
-
<li> элемент списка </li>
-
<li> <em> элемент списка </ em> </li>
-
</ul>
-
</body>
Используя следующее правило, можно задать стили для любого элемента <em>, находящегося внутри элемента <ul>, при этом не затрагивая в описании элемент <li>.
-
ul em {
-
color:blue;
-
}
