Это классический пример специфичности,что один селектор может переопределить правила, объявленные в другом .
Проверяя код, вы заметите, что .boxон был объявлен после div , и поэтому можно подумать, что дело не в специфике, а в классическом CSS-каскаде.
Это было бы верно, если бы использовался тот же селектор , тот же селектор, та же специфичность .
Однако здесь речь не идет о водопаде, поскольку браузер считает уганда telegram номера телефонов селектор .boxболее важным (конкретным), чем div.
Как вы пришли к такому выводу?
Конечно, на таком простом примере мы также можем понять, что divэто более общий селектор, чем .box. В первом случае мы выбираем все, что div присутствует на странице, а во втором — только элементы, имеющие определенный класс.
Но браузер так не думает , он не может полагаться на логику, поскольку ему необходимо производить расчеты и принимать решения на основе математических формул.
Вот почему мы говорим о вычислении специфичности селектора .
Специфичность — это не что иное, как числовой ряд, позволяющий браузерам понять, какое правило CSS будет иметь приоритет над другими, пытающимися выбрать тот же элемент.
Основные группы специфичности
Я только что говорил о числовых рядах , которые помогают нам понять специфику CSS, но прежде чем изучать их в деталях, вам необходимо изучить группы селекторов, которые создают этот ряд.
К настоящему времени должно быть ясно, что каждый селектор CSS имеет определенную важность (специфичность) в глазах браузера, но в целом мы можем сгруппировать селекторы следующим образом.