Выборщики CSS

Выборщики CSS

CSS селекторы используются для «поиска» (или выбора) HTML элементов, которые нужно стилизовать.

Мы можем разделить CSS селекторы на пять категорий:

Эта страница объяснит最基本的 CSS селекторы.

Выборщик CSS элемент

Элементные выборщики выбирают HTML-элементы по имени элемента.

Пример

Здесь все элементы <p> на странице будут выравнены по центру и имеют красный цвет текста:

p {
  text-align: center;
  color: red;
}

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

CSS-идентификаторные выборщики

Id-выборщики используют атрибут id HTML-элемента для выбора определенного элемента.

Id элементов уникальны на странице, поэтому id-выборщики используются для выбора уникального элемента!

Чтобы выбрать элемент с определенным id, напишите символ числа (#) и следом id элемента.

Пример

Это правило CSS будет применено к элементу с id="para1":

#para1 {
  text-align: center;
  color: red;
}

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

Примечание:Имя id не может начинаться с цифры.

CSS-классовые выборщики

Классовые выборщики выбирают HTML-элементы с определенным классом.

Чтобы выбрать элемент с определенным классом, напишите точку (.) и следом имя класса.

Пример

В этом примере все элементы HTML с классом class="center" будут красного цвета и выравнены по центру:

.center {
  text-align: center;
  color: red;
}

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

Вы также можете指定, что влияние класса будет только на определенные HTML-элементы.

Пример

В этом примере только элементы <p> с классом class="center" будут выравнены по центру:

p.center {
  text-align: center;
  color: red;
}

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

HTML-элементы также могут ссылаться на несколько классов.

Пример

В этом примере элемент <p> будет стилизован в зависимости от классов class="center" и class="large":

<p class="center large">Этот абзац использует два класса.</p>

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

Примечание:Имя класса не может начинаться с цифры!

CSS-универсальный выборщик

Универсальный выборщик (*), выбирает все HTML-элементы на странице.

Пример

Ниже приведены CSS-правила, которые влияют на каждый HTML-элемент на странице:

* {
  text-align: center;
  color: blue;
}

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

CSS-группированные выборщики

Группированные выборщики выбирают все HTML-элементы с одинаковыми стилями.

Пожалуйста, посмотрите下面的 CSS-код (элементы h1, h2 и p имеют одинаковые стили):

h1 {
  text-align: center;
  color: red;
}
h2 {
  text-align: center;
  color: red;
}
p {
  text-align: center;
  color: red;
}

Лучше всего группировать выборщики, чтобы максимально уменьшить код.

Чтобыroupir выборщики, используйте запятую, чтобы разделить каждого из них.

Пример

В этом примере мы группируем выбранные выше селекторы:

h1, h2, p {
  text-align: center;
  color: red;
}

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

Все простые CSS-выборщики

Выборщик Пример Описание примера
.class .intro Выберите все элементы с классом "intro".
#id #firstname Выберите элемент с id="firstname".
* * Выберите все элементы.
элемент p Выберите все элементы <p>.
элемент,элемент,.. div, p Выберите все элементы <div> и все элементы <p>.

Дополнительное чтение

Дополнительная литература:Выборщик CSS элемент

Дополнительная литература:Группировка выборщиков CSS

Дополнительная литература:Подробное описание CSS классового выборщика

Дополнительная литература:Подробное описание CSS ID выборщика

Дополнительная литература:Подробное описание CSS атрибутного выборщика

Дополнительная литература:Выборщик CSS потомка

Дополнительная литература:Выборщик CSS подэлемента

Дополнительная литература:Выборщик CSS смежного брата