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> ).