Каскад CSS по шагам

Grasp Cascade — интерактивный тренажёр каскада CSS для тех, кто изучает, хочет разобраться или освежить в памяти, почему одно правило побеждает другое: специфичность селектора, флаг !important и слои @layer.

На каждом шаге видно, какой селектор подошёл к элементу, какой у него вес и какое объявление из-за этого выбыло. Код можно изменить и пересчитать каскад заново.