CSS .class Селекторы

Определение и использование

CSS .class Селектор используется для выбора элементов с указанным class значением свойства, напишите имя элемента, за которым следует точка (

Чтобы выбрать все элементы с указанным.) символов, за которыми следует class значением свойства.

element.class Селектор используется для выбора элементов с указанным class значением свойства.

Выберите элемент с указанным class название элемента, за которым следует точка (.) символов, за которыми следует class значений свойств (См. также пример 2).

Совет:Элементы HTML могут ссылаться на несколько class(См. также пример 3).

Пример

Пример 1

Выбирает и устанавливает стили для всех элементов с class="intro":

.intro {
  background-color: yellow;
}

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

Пример 2

Выбирает и устанавливает стили для всех элементов <p> с class="intro":

p.intro {
  background-color: yellow;
}

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

Пример 3

.class Различные用法 селекторов:

/* Выбирает все элементы с class="center" */
.center {
  text-align: center;
}
/* Выбирает все элементы <p> с class="large" */
p.large {
  font-size: 200%;
}
/* Выбирает все элементы <p> с class, содержащей "fancy" и "beige" */
p.fancy.beige {
  font-family: 'Courier New', monospace;
  background-color: beige;
  border: 2px solid green;
}
/* Выбирает все элементы class="ex2" в элементах <p> с class="ex1" */
p.ex1 .ex2 {
  background-color: yellow;
}

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

CSS грамматика

.class {
  css declarations;
}

CSS грамматика

element.class {
  css declarations;
}

Технические детали

Версия: CSS1

Поддержка браузеров

Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка

Связанные страницы

Уроки CSS:Выборщик класса в CSS

Уроки CSS:Подробное описание выбора класса в CSS