2.7 KiB
title | localeTitle |
---|---|
Override Styles in Subsequent CSS | Переопределить стили в последующем CSS |
Переопределить стили в последующем CSS
Самый важный бит, который следует помнить при необходимости переопределять стили в последующем CSS, - это порядок создания классов.
Последний обновленный стиль будет иметь прецедент над ранее написанными классами.
Например:
<style>
body {
color: purple;
}
.red-text {
color: red;
}
.blue-text {
color: blue;
{
</style>
Теперь, когда вы создаете какой-либо текст в body
, он будет иметь назначенный ему цвет текста purple
.
Чтобы начать экспериментировать с процессом переопределения, теперь вы можете добавить класс "red-text"
чтобы увидеть результаты.
Используя вышеприведенный формат, текст ниже переопределяет ранее purple
цвет шрифта с red
.
<h1 class="red-text">Example</h1>
Если вы хотите добавить несколько классов, вы можете использовать этот формат:
<h1 class="class-name1 class-name2 class-name3">Example</h1>
Теперь вы можете добавить последний класс, созданный выше ( "blue-text"
), в тот же пример выше, чтобы увидеть результаты.
<h1 class="red-text blue-text">Example</h1>
Это автоматически выберет последний класс, созданный в разделе стилей, который в этом случае был "blue-text"
.
Даже если вы применяете red-text
-го класса за blue-text
второго класса, процесс переопределения будет выбирать последний созданный класс. В этом случае этот класс является blue-text
.
Так, например:
<h1 class="blue-text red-text">Example</h1>
Это все равно отобразит blue
цвет шрифта из-за упорядочивания в разделе стилей.
Класс blue-text
был создан последним, торчащим снизу ( </style>
).