69 lines
2.3 KiB
Markdown
69 lines
2.3 KiB
Markdown
|
---
|
|||
|
|
title: Override Class Declarations by Styling ID Attributes
|
|||
|
|
localeTitle: Переопределить объявления классов с помощью атрибутов идентификатора стилизации
|
|||
|
|
---
|
|||
|
|
## Переопределить объявления классов с помощью атрибутов идентификатора стилизации
|
|||
|
|
|
|||
|
|
Чтобы понять переопределение в CSS, вы должны сначала понять принцип precendance в CSS.
|
|||
|
|
|
|||
|
|
Главное правило, чтобы помнить, что CSS читается снизу вверх.
|
|||
|
|
|
|||
|
|
Примером этого является:
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
body {
|
|||
|
|
background-color: black;
|
|||
|
|
font-family: Arial;
|
|||
|
|
color: black;
|
|||
|
|
}
|
|||
|
|
.red-text {
|
|||
|
|
color: red;
|
|||
|
|
}
|
|||
|
|
.blue-text {
|
|||
|
|
color: blue;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<h1 class="red-text blue-text">Example</h1>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
В приведенном выше `Example` текстовый `Example` будет синим, потому что последний добавленный класс был `blue-text` .
|
|||
|
|
|
|||
|
|
**Важно помнить, что атрибут `id` будет иметь приоритет над классами, что означает, что он занимает наивысший уровень.**
|
|||
|
|
|
|||
|
|
Вы можете создать атрибут `id` , добавив `#` перед именем класса, как показано ниже:
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
#purple-text {
|
|||
|
|
color: purple;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Вот пример, чтобы показать вам, как **переопределить объявления классов с помощью атрибутов идентификатора стилей** :
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
body {
|
|||
|
|
background-color: black;
|
|||
|
|
font-family: Arial;
|
|||
|
|
color: black;
|
|||
|
|
}
|
|||
|
|
.red-text {
|
|||
|
|
color: red;
|
|||
|
|
}
|
|||
|
|
.blue-text {
|
|||
|
|
color: blue;
|
|||
|
|
}
|
|||
|
|
#green-color {
|
|||
|
|
color: green;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<h1 id="green-color" class="red-text blue-text">Example</h1>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Это позволит сделать текст `Example` быть зеленым , потому что `id` атрибут всегда будет иметь приоритет над `class` декларациями.
|