Псевдо-элементы в селекторах Назад
В контекстных селекторах псевдо-элементы допускаются только в конце селектора:
BODY P:first-letter { color: purple }
Псевдо-элементы могут в селекторах комбинироваться с классами:
P.initial:first-letter { color: red }
<P CLASS=initial>First paragraph</A>
Этот пример позволит сделать темно красными первые буквы всех параграфов, имеющих класс initial. При комбинировании с классами или псевдо-классами псевдо-элементы должны указываться в конце селектора. В одном селекторе может быть указан только один псевдо-элемент.
Множество псевдо-элементов Назад
Можно комбинировать несколько псевдо-элементов:
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 длится дальше тэга , должен быть сгенерирован дополнительный набор тэгов SPAN, т.е. фиктивная последовательность тэгов примет следующий вид:
<P>
<P:first-line>
<SPAN>
This text is inside a long
</SPAN>
</P:first-line>
<SPAN>
span элемент
</SPAN>
1 2 3
8 8 8
| |
*
Обратная связь