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