ID-селекторы

We use cookies. Read the Privacy and Cookie Policy

ID-селекторы

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

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

h1#chapter7 { text-align: center }

В листинге 7.6 правило стиля сопоставляется элементу, у которого значение атрибута ID равно z98y. Иначе говоря, это правило будет сопоставляться элементу P.

Листинг 7.6. ID-селекторы

<head>

<title>Глава 7</title>

<style type="text/css">

*#z98y { letter-spacing: 0.3em }

</style>

</head>

<body>

<p id=z98y>Текст абзаца</p>

</body>

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

Листинг 7.7. ID-селекторы

<head>

<title>Глава 7</TITLE>

<style type="text/css">

h1#z98y { letter-spacing: 0.5em }

</style>

</head>

<body>

<p id=z98y>Текст абзаца</p>

</body>

Надо отметить, что ID-селекторы имеют более высокий приоритет, чем селекторы атрибутов. Например, в HTML-документе селектор #p123 более специфичен, чем [ID=p123].

Данный текст является ознакомительным фрагментом.