Селекторы id CSS

Идентификатор выбора

Идентификатор выбора может определить специфический стиль для HTML-элемента с определенным id.

Идентификатор выбора определяется символом "#".

Ниже приведены два идентификатора выбора, первый определяет цвет элемента как красный, а второй определяет цвет элемента как зеленый:

#red {color:red;}
#green {color:green;}

В приведенном ниже HTML-коде, элемент p с атрибутом id red будет отображаться красным, а элемент p с атрибутом id green будет отображаться зеленым.

<p id="red">Этот абзац красный.</p>
<p id="green">Этот абзац зеленый.</p>

Внимание:Атрибут id может появляться только один раз в каждом HTML-документе. Хотите узнать причину? Пожалуйста, обратитесь к XHTML: реконструкция веб-сайта.

Идентификатор выбора и производный выборщик

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

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

Приведенные стили будут применяться только к абзацам,出现的元素具有 id sidebar. Этот элемент, вероятно, div или ячейка таблицы, хотя он также может быть таблицей или другим блочным элементом. Он даже может быть инлайн-элементом, например <em></em> или <span></span>, но такое использование является незаконным, потому что <p> не может быть вложен в инлайн-элемент <span> (если вы забыли причину, пожалуйста, обратитесь к XHTML: реконструкция веб-сайта)

Выборщик, множество применений

Даже если элемент, помеченный как sidebar, может出现在 документе только один раз, этот идентификатор выбора может быть использован много раз в качестве производного выбора:

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}
#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

Здесь, в отличие от других элементов p на странице, элементы p в sidebar получают специальную обработку, а также, в отличие от всех других элементов h2 на странице, элементы h2 в sidebar также получают различную специальную обработку.

Отдельный selector

Селекторы id могут работать независимо, даже если они не используются для создания производных селекторов:

#sidebar {
	border: 1px точечной линией #000;
	padding: 10px;
	}

Согласно этому правилу, элемент с id sidebar будет иметь черную точечную рамку шириной в один пиксель, а также окружен внутренним отступом (padding, внутренним пробелом) шириной в 10 пикселей. В старых версиях браузеров Windows/IE это правило может быть проигнорировано, если вы не определите особенно selector, к которому относится этот selector:

div#sidebar {
	border: 1px точечной линией #000;
	padding: 10px;
	}

Связанное содержимое

Если вам нужно углубиться в знания о селекторе id, пожалуйста, читайте продвинутые tutorиалы на CodeW3C.com:Подробное описание селекторов id CSS.