DevGang
Авторизоваться

Как CSS разрешает конфликты: каскадирование 

В CSS, если у нас есть несколько правил с одинаковой спецификой, конкурирующих за одни и те же элементы, тогда всегда побеждает последнее объявление.

Это C, Cascading, из аббревиатуры CSS.

Каскадные правила в том же файле CSS

Например, если у нас есть:

p { color: red };
/// other CSS rules
p { color: blue};

Таким образом наши абзацы будут синего цвета.

Каскадные правила при импорте разных файлов CSS

Это также доступно при импорте файлов CSS. Если таблицы стилей имеют конфликтующие правила для одних и тех же элементов, будет применено последнее импортированное правило.

red.css
p { color: red };
blue.css
p { color: blue };

И если мы импортируем оба этих файла в одном документе

index.html
<link rel="stylesheet" type="text/css" href="red.css">
<link rel="stylesheet" type="text/css" href="blue.css">

Тогда наши абзацы будут синего цвета с учетом порядка файлов.

Это относиться и к оформлению CSS в заголовке HTML-документа. Последнее импортированное правило победит.

index.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;
}

Источник:

#CSS
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

Поделитесь своим опытом, расскажите о новом инструменте, библиотеке или фреймворке. Для этого не обязательно становится постоянным автором.

Попробовать

Сделайте первый шаг к новой профессии

Получить скидку