2.5 Псевдо-элементы в селекторах

В контекстных селекторах псевдо-элементы допускаются только в конце селектора:

BODY P:first-letter { color: purple }

Псевдо-элементы могут в селекторах комбинироваться с классами:

P.initial:first-letter { color: red }

<P CLASS=initial>First paragraph</P>

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

2.6 Множество псевдо-элементов

Можно комбинировать несколько псевдо-элементов:

P { color: red; font-size: 12pt }

P:first-letter { color: green; font-size: 200% }

P:first-line { color: blue }

<P>Some text that ends up on two lines</P>

В этом примере первая буква каждого элемента 'P' будет зеленой с размером шрифта 24pt. Остаток первой строки (в соответствии с форматированием на холсте) будет синим, в то время как весь остальной параграф будет красным. Предположив, что перенос строки произойдет перед словом "ends", фиктивная последовательность тэгов будет такова:

<P>

<P:first-line>

<P:first-letter>

S

</P:first-letter>ome text that

</P:first-line>

ends up on two lines

</P>

Обратите внимание, что элемент 'first-letter' находится внутри элемента 'first-line'. Свойства, установленные в 'first-line' будут унаследованы 'first-letter', но будут переопределены, если то же свойство установлено в 'first-letter'.

Если псевдо-элемент разрывает настоящий элемент должны быть сгенерированны дополнительные тэги в фиктивной последовательности тэгов. Например, если элемент SPAN длится дальше тэга </P:first-line>, должен быть сгенерирован дополнительный набор тэгов SPAN, т.е. фиктивная последовательность тэгов примет следующий вид:

<P>

<P:first-line>

<SPAN>

This text is inside a long

</SPAN>

</P:first-line>

<SPAN>

span элемент

</SPAN>

3. Каскадирование

В CSS влиять на внешний вид документа может не только одна таблица стилей, а сразу несколько одновременно. Для этого есть две основных причины: модульная структура и баланс автор/читатель.

модульная структура

Дизайнер таблицы стилей может комбинировать несколько (частичных) таблиц стилей для уменьшения избыточности:

@import url(http://www.style.org/pastoral);

@import url(http://www.style.org/marine);

H1 { color: red } /* переопределить

импортированные таблицы */

Баланс автор/читатель.

Как читатели так и авторы могут влиять на внешний вид с помощью таблиц стилей. Для достижения этого они используют один и тот же язык таблиц стилей. UA имеет право самостоятельно вырабатывать механизм обращения к персональной таблице стилей.

Иногда могут возникать конфликты между таблицами стилей, которые влияют на документ. Разрешение конфликтов основывается на том, что каждое правило имеет вес. По умолчанию веса читательских правил меньше, чем веса правил, определенных автором. Т.е., если есть конфликт между правилом автора и правилом читателя, будет использовано правило автора. Как читательское, так и авторское правила переопределяют значения по умолчанию UA.

Импортируемые таблицы стилей также каскадируются в порядке их импортирования, в соответствии с правилами каскадирования, описанными ниже. Любые правила, определенные в самой таблице стилей, переопределяют правила импортированной таблицы стилей. Импортируемые таблицы стилей могут в свою очередь сами импортировать и, соответственно, переопределять другие таблицы стилей.

В CSS1 все определения '@import' должны помещаться в начало таблицы стилей перед всеми определениями. Это создает наглядность в переопределении правил в импортированных таблицах стилей.