Каскад — механізм визначення пріоритету стилів за трьома критеріями:
1. Важливість (!important — уникайте)
2. Специфічність
3. Порядок у коді
Специфічність (від більшої до меншої):
• Inline styles: 1,0,0,0
• ID: 0,1,0,0
• Class, псевдоклас, атрибут: 0,0,1,0
• Тег, псевдоелемент: 0,0,0,1
Приклад:
1#nav .link:hover { } /* 0,1,1,1 */
2.nav a { } /* 0,0,1,1 */Переможе перше правило.
Комбіновані селектори:
1div p { } /* нащадок */
2div > p { } /* прямий нащадок */
3h1 + p { } /* сусідній елемент */
4.a, .b { } /* перелік */