Почему перекрываются стили?

Question

[ince]

В HTML у меня стили подключены так:

<link rel="stylesheet" href="bootstrap.min.css"> 
    <link rel="stylesheet" href="opennet.css"> 
    <link rel="stylesheet" href="test3.css">

Соответственно, насколько я понимаю приоритет должен располагаться так:
1) test3.css - перекрывает всех;
2) opennet.css - перекрывает bootstrap.min.css и стили браузера;
3) bootstrap.min.css перекрывает стили браузера;
4) стили браузера - самое дно.

Почему же в инструментах разработчика я вижу такую картину?
Почему font из opennet.css не перекрывает font из bootstrap.min.css?

Не вижу никакой закономерности. Где я заблуждаюсь?

Answer 1

[Владимир Проскурин]

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

.query {}
.query {} // больше приоритет, т.к. она ниже

но надо понимать, что помимо приоритета по порядку, есть еще приоритет по селектору. т.е.

div.query {} // используется этот, т.к. селектор "подробнее".
.query {}

Литература
https://developer.mozilla.org/ru/docs/Web/CSS/Spec...
https://webref.ru/course/css-basics/priority
https://idg.net.ua/blog/uchebnik-css/azy-css/kaskadnost

Comments

[ince]

Селектор подробнее?
Как это гуглить?

[Владимир Проскурин]

ince, ну, в смысле он имеет больший вес. Все по тем ссылкам, тут есть табличка приоритетов различных селекторов https://idg.net.ua/blog/uchebnik-css/azy-css/kaskadnost