Порядок приоритетов при использовании нескольких противоречивых файлов CSS - PullRequest
Новая
       1

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

48 голосов
/ 05 мая 2011

При использовании нескольких CSS-файлов на одной странице, и они сталкиваются, как узнать, какой из них будет использоваться?Например, если один говорит синий фон тела, а другой - красный.

1 Ответ

78 голосов
/ 05 мая 2011

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

Если оба фрагмента CSS имеют одинаковую специфичность (например, оба они 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):

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

Внешний CSS:

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

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

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

...