Каков порядок приоритета CSS? ⇐ Html

[Anonymous]

Я пытаюсь понять, почему один из моих классов CSS переопределяет другой (а не наоборот)?
Вот у меня есть два класса CSS: p>

Код: Выделить всё

.smallbox {
background-color: white;
height: 75px;
width: 150px;
font-size:20px;
box-shadow: 0 0 10px #ccc;
font-family: inherit;
}

.smallbox-paysummary {
@extend .smallbox;
font-size:10px;
}

и, на мой взгляд, я вызываю:

Код: Выделить всё

Шрифт (перекрывающийся элемент) отображается размером 10 пикселей вместо 20 пикселей. Может ли кто-нибудь объяснить, почему это так?


Подробнее здесь: https://stackoverflow.com/questions/251 ... ce-for-css