Порядок приоритезации при использовании нескольких противоречивых файлов css

Ответ 1

Быстрый ответ:

Если обе части CSS имеют одинаковые specificity (например, они оба body{), то какой бы вызов не вызывался LAST будет отменять предыдущий.

НО, если что-то имеет более высокую специфичность (более конкретный селектор), он будет использоваться независимо от порядка.

Пример 1:

<div class="container">
    <div class="name">Dave</div>
</div>

<style>
    .name { color: blue; }
    .name { color: red; }
</style>

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

Пример 2:

<div class="container">
    <div class="name">Dave</div>
</div>

<style>
    #container .name { background-color: blue; }
    .name { background-color: red; }
</style>

Приведенный выше пример сделает синий цвет фона, хотя синий был первым, потому что селектор более "специфический" .

Исключение (использование !important):

Включение ! important будет переопределять как специфичность, так и порядок, но, на мой взгляд, следует использовать, только если вы пытаетесь с сторонним кодом, в котором у вас нет доступа, чтобы изменить его каким-либо другим способом.

Внешний CSS:

Правила перезаписи работают одинаково на внешних файлах CSS. Только представьте, что они поставили их в первую очередь, сверху вниз. Селекторы, вызываемые в первом файле (-ах), будут перезаписаны теми же-специфическими селекторами в любых последующих файлах. Но специфика по-прежнему будет козырем в одном файле или в нескольких файлах.

Как проверить:

В Chrome, Firefox и современных версиях IE (возможно, Safari тоже) вы можете щелкнуть правой кнопкой мыши по чему-то и нажать "Осмотреть элемент". Это покажет вам HTML, а также любой применяемый CSS. Когда вы просматриваете CSS (обычно справа), вы увидите вещи, которые вычеркнуты - это означает, что они либо неправильные CSS, либо были перезаписаны. Чтобы протестировать, вы можете изменить селектор CSS (либо в своем собственном коде, либо прямо там, в окне инструментов разработчика), чтобы сделать их более конкретными и посмотреть, не делает ли это то, что затем не вычеркнуто... и т.д. Поиграйте с этим инструментом - это ОЧЕНЬ полезно.