Калькулятор специфичности

1. #nav .item:hover120

   Сильнее всех

   • #nav — идентификатор.
   • .item — класс, атрибут или псевдокласс.
   • :hover — класс, атрибут или псевдокласс.
2. ul li a003

   Место 3

   • ul — тег или псевдоэлемент.
   • li — тег или псевдоэлемент.
   • a — тег или псевдоэлемент.
3. .menu > li:not(.active)021

   Место 2

   • .menu — класс, атрибут или псевдокласс.
   • li — тег или псевдоэлемент.
   • :not(.active) — класс, атрибут или псевдокласс. : not() берёт специфичность самого весомого аргумента.
4. :where(.card) h2001

   Место 4

   • :where(.card) — не влияет. : where() всегда даёт нулевую специфичность.
   • h2 — тег или псевдоэлемент.

Специфичность — три числа: идентификаторы, затем классы, атрибуты и псевдоклассы, затем теги и псевдоэлементы. Сравниваются слева направо: один идентификатор сильнее любого числа классов. Сильнее всех — #nav .item: hover: при конфликте победит его объявление. Специфичность сравнивается только внутри одного каскадного слоя; ! important и атрибут style сильнее любых селекторов.