Учебное пособие по CSS Intermediate Комбинирование и вложение

комбинация

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

ч2 { цвет: красный; } .thisOtherClass { цвет: красный; } .yetAnotherClass { цвет: красный; }

Тогда вы можете написать:

h2, .thisOtherClass, .yetAnotherClass { цвет: красный; }

Вложенный

Если CSS хорошо структурирован, нет необходимости использовать слишком много классов или селекторов идентификаторов. Это связано с тем, что вы можете указать селекторы внутри селекторов. (Или лучше сказать, селектор контекста - переводчик)
например:

#вершина { цвет фона: #ccc; отступ: 1em } #top h1 { цвет: #ff0; } #top п { цвет: красный; начертание шрифта: жирный; }

Это исключает ненужные селекторы классов или идентификаторов, если применять их к HTML следующим образом:

<div id="топ"> <h1>Шоколадное карри</h1> <p>Это мой рецепт приготовления карри исключительно с шоколадом</p> <p>Ммм мм мммммм</p> </div>

Это связано с тем, что, используя английские селекторы, разделенные полушириной пробелом, мы указываем, что h1 в идентификаторе ID имеет цвет «#ff0», а p — красный и жирный.
Это также может быть немного сложнее (так как может быть более двух уровней, например, внутри внутри внутри внутри внутри и т. д.). Вам нужно больше практиковаться.