Мы просто доказали, что браузеры читают CSS сверху вниз. Это означает, что в случае конфликта браузер будет использовать любую декларацию CSS. Но мы еще не закончили. Существуют и другие способы переопределения CSS. Вы помните атрибуты id? Давайте переопределим ваши классы с pink-text и blue-text и сделаем ваш элемент h1 оранжевым, предоставив элементу h1 идентификатор, а затем стиль этого идентификатора.

Дайте элементу h1 атрибут id orange-text . Помните, что стили id выглядят следующим образом: <h1 id="orange-text"> Оставьте классы blue-text и pink-text на вашем элементе h1 . Создайте объявление CSS для вашего orange-text в элементе style . Вот пример того, как это выглядит:

# brown-text {
коричневый цвет;
}

Наш класс pink-text переопределил декларацию CSS в body элементе! Мы просто доказали, что наши классы переопределяют CSS элемента body . Итак, следующий логический вопрос: что мы можем сделать, чтобы переопределить наш класс pink-text ?

Создайте дополнительный класс CSS blue-text, который задает элементу синий цвет. Убедитесь, что оно ниже вашего объявления класса pink-text. Примените класс blue-text к вашему элементу h1 в дополнение к вашему классу pink-text, и давайте посмотрим, какой из них выиграет. Применение нескольких атрибутов класса к элементу HTML выполняется с пространством между ними следующим образом: class="class1 class2" Примечание. Не имеет значения, какой порядок классов указан в элементе HTML. Тем не менее, порядок объявлений class в разделе <style> - это то, что важно. Вторая декларация всегда будет иметь приоритет над первой. Поскольку .blue-text объявлен вторым, он переопределяет атрибуты .pink-text