@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?
5c0a7474b3e94506919138.jpeg
Не вижу никакой закономерности. Где я заблуждаюсь?
  • Вопрос задан
  • 261 просмотр
Решения вопроса 1
Vlad_IT
@Vlad_IT Куратор тега CSS
Front-end разработчик
Не смотрите на расположение файлов, как на расположение файлов. Представьте эти файлы в одном файле, расположенные в таком же порядке. т.е.
.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
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы