Подробное описание селекторов id CSS

Селектор ID позволяет определять стиль независимо от элементов документа.

CSS ID Selектор

В некоторых аспектах селектор ID ähnelt dem Klasse-Selектор, aber es gibt auch einige wichtige Unterschiede.

Грамматика

Сначала перед селектором ID есть символ '#' - также известный как шахматный символ или символ скобки.

Смотрите下面的 правила:

*#intro {font-weight:bold;}

Как и классовый селектор, в селекторе ID можно пропустить глобальный селектор. Предыдущий пример также можно написать так:

#intro {font-weight:bold;}

Эффект этого селектора будет таким же.

Вторая разница в том, что селектор ID не ссылается на значение свойства class,毫无疑问, он ссылается на значение свойства id.

Вот пример реального селектора ID:

<p id="intro"<p>This is a paragraph of introduction.</p>

Попробуйте сами

Классовый селектор или селектор ID?

В главе о классовых селекторах мы уже объяснили, что можно определить класс для любого количества элементов. В предыдущей главе имя класса 'important' было применено к элементам p и h1, и его можно применить к многим другим элементам.

Отличие 1: Может использоваться только один раз в документе

В отличие от класса, в одном HTML-документе селектор ID используется один раз и только один раз.

Отличие 2: Не может использоваться список слов ID

В отличие от классового селектора, селектор ID не может быть использован вместе, так как атрибут ID не позволяет иметь список слов, разделенных пробелами.

Отличие 3: ID может содержать больше смысла

Как и классы, ID могут быть выбраны независимо от элементов. В некоторых случаях вы знаете, что в документе появится определенный идентификатор, но не знаете, на哪个 элементе он появится, поэтому вы хотите声明 независимый селектор ID. Например, вы можете знать, что в данном документе будет элемент с ID 'mostImportant'. Вы не знаете, это ли это самое важное: абзац, фрагмент текста, список или заголовок раздела. Вы знаете только, что в каждом документе есть такой важный контент, который может出现在 любом элементе и может быть только один. В этом случае можно написать такие правила:

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

Эта правила будут соответствовать следующим элементам (эти элементы не могут出现在 одном документе одновременно, так как у них есть одинаковые значения ID):

<h1 id="mostImportant"Это важно!
<em id="mostImportant"Это важно!
<ul id="mostImportant">This is important!</ul>

Попробуйте сами:

Чувствительность к регистру

Обратите внимание, что классовые и идентификационные селекторы могут быть чувствительными к регистру. Это зависит от языка документа. В HTML и XHTML значения классов и идентификаторов определены как чувствительные к регистру, поэтому значения классов и идентификаторов должны соответствовать значениям в документе.

Таким образом, для следующего CSS и HTML элемент не станет жирным:

#intro {font-weight:bold;}
<p id="Intro"<p>This is a paragraph of introduction.</p>

Так как有大写字母 I и строчной i, селекторы не будут соответствовать элементам выше.