Группировка селекторов CSS

Если несколько селекторов CSS имеют одинаковые объявления CSS, их можно сгруппировать.

синтаксис:

  selector1, selector2, selector3, ........................  .......... selectorN  {свойство: значение;  ..........} 

Где, selector1, ……… selectorN — разные селекторы. Обратите внимание, что здесь селекторы разделены комбинаторами «,» .

Пример группировки селекторов CSS

Код CSS:

  h1, h2, h3 {color: darkred; /* цвет h1 h2 h3 должен быть темно-красным */font-variant: small-caps; /* h1 h2 h3 должен быть прописными */}  

HTML-код:

       Пример группировки селекторов CSS     

Пример CSS.

Пример селектора CSS.

Пример группировки селекторов CSS.

Просмотрите этот простой пример группировки селекторов CSS в отдельном окне браузера.

Расширенный пример группировки селекторов CSS

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

Код CSS:

  # w3r p, h1 h2 h3 {color: darkred; /* цвет p внутри w3r id и h1 h2 h3 должен быть темно-красным */font-variant: small-caps; /* p внутри w3r id и h1 h2 h3 должны быть прописными */}  

HTML-код:

       Расширенный пример группировки селекторов CSS     

Пример CSS.

.

Пример селектора CSS.

Пример группирования селекторов CSS.

Lorem ipsum dolor sit amet, Conctetur adipiscing elit. Сделано элитная урна.

Результат:

Пример селектора CSS.

Пример группировки селекторов CSS.

Lorem ipsum dolor sit amet, conctetur adipiscing elit. Donec a urna elit.

Просмотрите этот расширенный пример группировки селекторов CSS в отдельном окне браузера.


  • Новый контент, опубликованный на w3resource:
  • Упражнения по программированию Scala, практика, Решение
  • упражнения Python Itertools
  • упражнения Python Numpy
  • упражнения пакета Python GeoPy
  • упражнения Python Pandas
  • Упражнения Python nltk
  • Упражнения Python BeautifulSoup
  • Шаблон формы
  • Composer - Менеджер пакетов PHP
  • PHPUnit - тестирование PHP
  • Laravel - PHP Framework
  • Angular - JavaScript Framework
  • React - JavaScript Библиотека
  • Vue - JavaScript Framework
  • Jest - JavaScript Testing Framework



Оцените статью
nanomode.ru
Добавить комментарий