5.2.11 Селектор cестринского элемента

Предназначены для выбора элемента, расположенного непосредственно за другим заданным элементом и имеющего с ним общего родителя. Общий вид:

Селектор1 + Селектор2 { описание }

Пример. Выделить жирным текстом элемент span, следующий сразу после заголовка h1 (при условии, что у них есть общий родитель):

h1 + span { font-weight: bold;}

Этот span будет жирным.

<h1>Очень полезная статья</h1>

<span>Тут указан, например, автор. Жирный текст</span>

<p>Далее идет текст статьи</p>

Этот span не будет выделен жирным – между ним и h1 имеется дополнительный элемент.

<h1>Очень полезная статья</h1>

Далее идет текст статьи.

<span>Мы с h1 сестринские?</span>

5.2.12 Селектор обобщенных родственных элементов

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

Селектор1 ~ Селектор2 { описание }

Пример. Pадать отступ красной строки всем абзацам, которые следуют после h1:

h1 ~ p { text-indent: 20px; }

5.3 Иерархия стилей

Наследование – это механизм с помощью которого стили применяются не только к самим элементам, но и к их потомкам. При написании CSS может возникнуть ситуация, когда для одного и того же элемента подходит сразу несколько правил. Например:

div {color: #0f0; font-weight: bold;} /* зеленый цвет */

.box {font-weight: normal;}

body {color: #f00; } /* красный цвет */

}

/* будет синий зеленый но не жирыные */

<div class="box">Какого же я цвета?</div>

И первое и второе правила подходят для нашего элемента div (в первом случае мы выбираем его, используя селектор типа, во втором – селектор класса). Более того, третье правило тоже нам подходит. Поскольку div наверняка лежит внутри тега body и, согласно вышеприведенному определению, должен унаследовать значение его свойства color.

Текст внутри тега div, не может быть одновременно трех цветов. Должны существовать правила, согласно которым точно рассчитывается, какое из определений будет применено. Такие правила называют – правила каскадирования.

Для отображения элемента браузер должен:

1. Найти все правила, селектор которых подходит для выбора данного элемента.

2. Разделить все объявления из найденных правил на группы согласно важности и источника:

   1. важные объявления читателя;

   2. важные объявления автора;

   3. обычные объявления автора;

   4. обычные объявления читателя;

   5. объявления агента пользователя.

3. В пределах групп провести сортировку объявлений по специфичности.

4. Для равных специфичностей отсортировать по очередности расположения.

После остается выбрать победившие объявления и сформировать из них правило, применяющееся к данному конкретному элементу.

Если очень нужно, можно пометить какое нибудь объявление, как важное (important). Такое объявление будет считаться заведомо победившим

div {

color: #00f !important; /* важное объявление - сразу победа! */

}