Вы вдоволь наигрались со специфичностью, а теперь пришло время изучить полные правила её вычисления.

Специфичность селектора разбивается на 4 группы — a, b, c, d:

• если стиль встроенный, то есть определён как style="...", то а=1, иначе a=0;
• значение b равно количеству идентификаторов (тех, которые начинаются с #) в селекторе;
• значение c равно количеству классов, псевдоклассов и селекторов атрибутов;
• значение d равно количеству селекторов по тегу и псевдо-элементов.

Полученное значение часто представляют в виде числа. Например, 0,1,0,0 записывают как 100, а 0,0,1,0 — как 10. Селектор, обладающий большим значением специфичности, обладает и большим приоритетом.

Несмотря на удобство, запись в виде числа может вводить в заблуждение. Важно помнить, что 0,1,10,0 не превращается в 200, а двадцать селекторов по тегу имеют меньший приоритет, чем один селектор по классу.

Посчитаем специфичность в нашем примере:

Отсюда сразу видно, что в нашем примере самым приоритетным является селектор #floor.cat-in-box.