Селекторы класса CSS

В CSS классовый селектор отображается точкой:

.center {text-align: center}

В предыдущем примере все элементы HTML с классом center выравниваются по центру.

В приведенном ниже HTML-коде, элементы h1 и p имеют класс center. Это означает, что оба элемента будут следовать правилам селектора ".center".

<h1 class="center">
Этот заголовок будет выровнен по центру
</h1>
<p class="center">
Этот абзац также будет выровнен по центру.
</p>

Внимание:Первый символ класса не может быть числом! Он не работает в Mozilla или Firefox.

Как и id, class может быть использован в качестве производного селектора:

.fancy td {
	color: #f60;
	background: #666;
	}

В этом примере, ячейки таблицы, находящиеся внутри больших элементов с классом fancy, будут отображаться с фоновым цветом серого и текстом оранжевого цвета. (Большие элементы с классом fancy могут быть таблицей или div)

Элементы также могут быть выбраны на основе их класса:

td.fancy {
	color: #f60;
	background: #666;
	}

В этом примере таблицевые ячейки с классом fancy будут иметь фоновый цвет серого и橙色.

<td class="fancy">

Вы можете分配 класс fancy любому таблицевому элементу неограниченное количество раз. Все ячейки, помеченные как fancy, будут иметь фоновый цвет серого и橙色. Ячейки, не помеченные классом fancy, не будут受到影响 этим правилом. Также стоит отметить, что абзацы с классом fancy не будут иметь фоновый цвет серого и橙色, и, конечно же, любые другие элементы, помеченные как fancy, также не будут受到影响 этим правилом. Это связано с тем, как мы пишем это правило, и эффект ограничивается ячейками, помеченными как fancy (то есть использование элемента td для выбора класса fancy).

Связанные материалы

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