Привязка к элементам документа
Выполнить поиск элемента с учетом заданного отношения к другому элементу HTML-документа можно следующими способами.
- Элемент1 Элемент2 — находим Элемент2, который располагается внутри контейнера Элемента1
Цвет текста ссылки станет красным, если тег <a> находится внутри тега <div>.
- Элемент1 > Элемент2 — находим Элемент2, который является дочерним для Элемента1
Цвет текста ссылки станет красным, если тег <a> находится внутри тега <div> и не вложен в другой тег.
<a href="link1.html">Ссылка 1</a><br>
<span><a href="link2.html">Ссылка 2</a></span>
</div>
В этом примере только первая ссылка станет красного цвета, так как вторая ссылка расположена внутри тега <span>.
- Элемент1 + Элемент2 — находим Элемент2, который является соседним для Элемента1 и следует сразу после него
Цвет текста ссылки станет красным, если тег <a> следует сразу после тега <div>.
- Элемент1 ~ Элемент2 — находим Элемент2, который следует после Элемента1, причем необязательно сразу
Цвет текста ссылки станет красным, если тег <a> следует после тега <div>.
<span>Текст</span><br>
<a href="link1.html">Ссылка 1</a><br>
<a href="link2.html">Ссылка 2</a><br>
<span><a href="link3.html">Ссылка 3</a></span><br>
<a href="link4.html">Ссылка 4</a><br>
В этом примере ссылки 1, 2 и 4 станут красного цвета. Ссылка 3 не станет красного цвета, так как расположена внутри тега <span>.
При необходимости можно составлять выражения из нескольких селекторов.
Цвет текста ссылки станет красным, если тег <a> расположен внутри тега <span>, а тот в свою очередь вложен в тег <div>.
<a href="link1.html">Ссылка 1</a><br>
<span>
<a href="link2.html">Ссылка 2</a><br>
</span>
</div>
В этом примере только ссылка 2 будет красного цвета.
 |
 |
 |