Каков порядок загрузки файлов CSS на страницу HTML?

Question

Я хочу знать порядок загрузки файлов CSS на странице HTML.

Мое действительное требование таково: у меня в приложении более 10 файлов CSS.

IЯ импортирую 3-4 файла CSS на каждой странице HTML.Проблема в том, что у меня есть дубликаты классов, которые определены в некоторых файлах CSS.Это означает, что я переопределяю некоторые классы CSS в файлах CSS.На некоторых страницах ведет себя правильно.На некоторых страницах это ведет себя неправильно.У меня есть встроенные стили, определенные для некоторых DIV на HTML-странице.Я держу CSS класс для этого DIVs также.

Кто-нибудь может знать, какой из них будет иметь более высокий приоритет или какой загружается первым?

Answer 1

Обычно последнее правило имеет приоритет.С учетом вышесказанного существуют «исключения» в том смысле, что встроенные стили имеют приоритет над внешними таблицами стилей (встроенный! Важный важнее, чем внешний! Важный и т. Д.), А более конкретные селекторы переопределяют универсальные селекторы.

Читать все об этом @ http://www.w3.org/TR/CSS2/cascade.html

Answer 2

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

Так что
div.sample { background: none; width: 200px }
и
div.sample { color: #FFF; width: 400px }
станут
div.sample { background: none; color: #FFF; width: 400px }

Вы также можете использовать надстройку «Важно», чтобы правила имели приоритет над другими определенными правилами.

Итак
div.sample { background: none; width: 200px !important }
и
div.sample { color: #FFF; width: 400px }
станет
div.sample { background: none; color: #FFF; width: 200px !important }

Примечание: Многие люди посоветуют против , используя надстройку "важный" в ваших CSS-файлах.Лично я не вижу в этом ничего плохого.

Answer 3

Каждый элемент будет отображаться на основе свойств из последней таблицы стилей, из которой он был выбран. Свойства, которые были объявлены как !important;, являются исключением. Часть проблемы в том, что у вас есть 10 таблиц стилей.