Ответ 1
На самом деле вы не можете сделать ссылку (один из основных недостатков CSS), но вы можете сделать это:
.btn:active, .red {
/* Block A: Most (or all) of what used to just be in .red below */
}
.btn:active {
/* Block B: Stuff *just* for .btn:active, if any */
}
.red {
/* Block C: Stuff *just* for .red, if any */
}
Запятая означает, что определения в теле блока А применяются отдельно к каждому из этих селекторов, и поэтому они применяются к любым элементам ".btn", которые являются ": активными" и отдельно применяются к любому ".red", элементы.
Блок B и блок C являются необязательными. Они предназначены для любых определений, которые вы хотите применить только к данному селектору. Вы обычно указываете их после блока А, потому что правила одинаковой специфичности применяются сверху вниз, поэтому вы можете переопределить что-либо из блока А, который вы хотите в блоке B или блоке C, и эти блоки "выиграют".