Селектори які залежать від контексту

Дата добавления: 2015-07-09; просмотров: 586; Нарушение авторских прав

<html>

<head>

<title></title>

<link href="lib/style/style.css" rel="stylesheet" type="text/css"/>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>

<body>

<ul>

<li><a href=”#”>ссилка</a></li>

</ul>

<table>

<tbody>

<tr>

<td>

<p>

<a href=”#”>ссилка</a>

</p>

</td>

</tr>

</tbody>

</table>

</body>

<html/>

/ * всі посилання, що знаходяться всередині списків, стануть червоними: * /

li a{color:red;}
/ * всі посилання в параграфах, знаходяться всередині таблиць, стануть зеленими: */

table p a{color:green;}

Це найпоширеніший метод створення контекстуальних селекторів, який називається «селектором нащадків». Розберемо його докладніше.

«Нащадками» елемента HTML називаються будь вкладені в нього елементи: це його «діти» (тобто безпосередньо вкладені), діти його дітей, і так далі, вглиб ієрархії тегів.

Правильно використовуючи селектори, ми можемо прицільно застосувати CSS стилі до потрібних елементів, пославшись на їх батьківський елемент. Для цього перед селектором шуканого елемента треба вставити селектори його «предків», розділивши їх пропуском.

У наведеному прикладі ми начебто створили список селекторів, розділений пробілами. Насправді це один селектор нащадків. Він вказує на всі гіперпосилання (елементи A) вкладені в списки (елементи LI), в свою чергу знаходяться всередині елемента з ідентифікатором footer. У всіх таких гіперпосилань ми міняємо товщину шрифту на bold (напівжирний шрифт).

<== предыдущая лекция	\|	следующая лекция ==>
Синтаксис	\|	Основні селектори (обов’язково потрібно знати)