ID-селекторы

Атрибут ID позволяет назначить идентификатор одному экземпляру элемента в дереве HTML-документа. В CSS ID-селекторы сопоставляются экземпляру элемен­та в зависимости от его идентификатора. ID-селектор содержит символ «#», непо­средственно за которым следует значение атрибута ID.

Например, следующий ID-селектор сопоставляется элементу HI, значение атрибута ID которого равно chapter7:

Hl#chapter7 { text-align: center }

В примере из листинга 1.63 правило стиля сопоставляется элементу, у которого значение атрибута ID равно «first». Это значит, что данное правило будет сопоставляться элементу Р.

Листинг 1.63. ID-селектор сопоставляет правило любому тегу

<ТIТLE>Глава 7</ ТIТLE > <STYLE type="text/css">

*#first { letter-spacing: 0.3em }

</STYLE> </HEAD> <BODY>

<p id=z98y>TeKCT абзаца</Р>

</BODY>

Однако в примере из листинга 1.64 это правило стиля будет сопоставляться толь­ко элементу H1, у которого значение атрибута ID равно first. В этом примере данное правило не сопоставляется элементу Р.

Листинг 1.64. ID-селектор сопоставляет правило только тегу H1

<HEAD>

< ТIТLE >Глава 9</TITLE> <STYLE type="text/css">

Hl#first { letter-spacing: 0.5em } </STYLE>

</HEAD>

<BODY>

<P id=first>TeKCT абзаца</Р> </BODY>

Отметим, что ID-селекторы имеют более высокий приоритет, чем селекторы атри­бутов.

Псевдоклассы и псевдоэлементы

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

В CSS вводится понятие о псевдоклассах и псевдоэлементах, позволяющих осуще ствлять форматирование на основании информации, не включенной в дерево HTML-документа. Сразу отметим, что при задании имен псевдоклассов и псевдо-элементов учитывается регистр.


Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: