Как CSS разрешает конфликты: каскадирование
В CSS, если у нас есть несколько правил с одинаковой спецификой, конкурирующих за одни и те же элементы, тогда всегда побеждает последнее объявление.
Это C, Cascading, из аббревиатуры CSS.
Каскадные правила в том же файле CSS
Например, если у нас есть:
p { color: red };
/// other CSS rules
p { color: blue};
Таким образом наши абзацы будут синего цвета.
Каскадные правила при импорте разных файлов CSS
Это также доступно при импорте файлов CSS. Если таблицы стилей имеют конфликтующие правила для одних и тех же элементов, будет применено последнее импортированное правило.
p { color: red };
p { color: blue };
И если мы импортируем оба этих файла в одном документе
<link rel="stylesheet" type="text/css" href="red.css">
<link rel="stylesheet" type="text/css" href="blue.css">
Тогда наши абзацы будут синего цвета с учетом порядка файлов.
Это относиться и к оформлению CSS в заголовке HTML-документа. Последнее импортированное правило победит.
<html>
<head>
<style>
p {color: red;}
</style>
<link rel="stylesheet" type="text/css" href="blue.css">
</head>
<body>
<p>This will be a blue paragraph.</p>
</body>
</html>Правила каскадирования в том же блоке декларации
Наконец, это также относится к фактическим блокам объявлений свойств. Возьмем для примера следующий код:
Как и в предыдущих примерах, абзацы по-прежнему будут синими.
p {
color: red;
font-size: 16px;
line-height: 32px;
background-color: #eee;
border: none;
color: blue;
}
Кстати, из-за ситуаций, подобных этой, хорошей практикой может быть объявление свойств в алфавитном порядке и избегание простого отбрасывания нового объявления в конце блока.
p {
background-color: #eee;
border: none;
// conflicts are easyer to track
color: red;
color: blue;
font-size: 16px;
line-height: 32px;
}
