2.3 KiB
2.3 KiB
title | localeTitle |
---|---|
Override Class Declarations by Styling ID Attributes | Переопределить объявления классов с помощью атрибутов идентификатора стилизации |
Переопределить объявления классов с помощью атрибутов идентификатора стилизации
Чтобы понять переопределение в CSS, вы должны сначала понять принцип precendance в CSS.
Главное правило, чтобы помнить, что CSS читается снизу вверх.
Примером этого является:
<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
, добавив #
перед именем класса, как показано ниже:
<style>
#purple-text {
color: purple;
}
</style>
Вот пример, чтобы показать вам, как переопределить объявления классов с помощью атрибутов идентификатора стилей :
<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
декларациями.