Выбор между селектором классов и селектором идентификаторов

Как было показано ранее, назначать классы можно любому количеству элементов; имя класса warning было применено и к элементу p, и к элементу span и могло бы применяться к намного большему количеству элементов. С другой стороны, идентификаторы в HTML-документе используются один и только один раз. Поэтому если в документе есть элемент, значение атрибута id которого равно lead-para, ни один другой элемент этого документа не может иметь id со значением lead-para. Броузеры не всегда проверяют уникальность идентификаторов в HTML-документе, а это значит, что если поместить в него несколько элементов с одинаковым значением атрибутов id, то, по всей вероятности, к ним всем будут применены одинаковые стили. Это неправильно, но такое иногда случается. Наличие одинаковых идентификаторов в документе усложняет написание DOM-сценариев, поскольку такие функции, как getElement-ById(), полагают, что в документе существует единственный элемент с заданным значением идентификатора.

В отличие от селекторов класса, селекторы идентификаторов не могут объединяться, поскольку в атрибуты id нельзя помещать разделенные пробелами списки. На синтаксическом уровне работоспособность точечной нотации (на пример, .warning) в XML документах не гарантируется.


Точку можно применять в HTML, SVG и MathML; возможно, ее применение будет разрешено в будущих языках, но это решается на уровне спецификации каждого языка. Нотация идентификатора со знаком фунта (например, #lead) будет работать в любом языке документов, где предусмотрен атрибут, от которого требуется уникальность значений в рамках документа. Уникальность значений может требоваться для атрибута с именем id или с каким-нибудь другим – главное, чтобы в языке для значений этого атрибута требовалась уникальность в рамках документа.

Еще одно отличие между именами class и id состоит в том, что идентификаторы имеют больший вес, когда определяется, какие стили должны применяться к данному элементу. Более подробно это рассмотрено в следующей главе. Подобно классам, идентификаторы могут быть выбраны независимо от элемента. Возможны такие ситуации, когда заранее известно, что в документе появится определенное значение идентификатора, но в каком элементе это произойдет, неизвестно (как в предупреждениях по обработке плутония), поэтому надо объявить независимый селектор идентификатора. Например, известно, что в любом данном документе будет элемент, значение идентификатора которого равно mostImportant.


Но будет ли эта часть абзацем, короткой фразой, пунктом списка или заголовком раздела, неизвестно. Вы только знаете, что она будет появляться в произвольном элементе каждого документа и встречаться не чаще одного раза. Правило должно быть таким:

#mostImportant {color: red; background: yellow;}

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

Это важно!


Это важно!
    Это важно!


Также заметьте, что в зависимости от языка документа селекторы идентификаторов могут быть чувствительными к регистру. Языки HTML и XHTML определяют имена классов и идентификаторы как чувствительные к регистру, поэтому использование в значениях класса и идентификаторах заглавных букв должно соответствовать тому, что находится в ваших документах. Таким образом, в следующем объединении CSS и HTML элемент не будет выделен полужирным шрифтом:

p.criticalInfo {font-weight: bold;}

Не смотрите вниз.



Из-за несовпадения регистра буквы «I» селектор не выберет данный элемент. Некоторые старые броузеры рассматривают имена классов и идентификаторы без анализа регистра написания, но во всех современных броузерах чувствительность к регистру реализована.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Выбор дочерних элементов
Выбор конкретного атрибута
Выбор на основании конкретного значения атрибута
Выбор первого дочернего элемента
Выбор по частичному значению атрибута

Вернуться в раздел: CSS / 2. Селекторы