CSS группировка неправильно?

Question

Почему

.right, .left .box_header {
margin: -10px -1.2% 10px -1.2%;
padding: 5px 0.5% 5px 0.5%;
}

не делает то, что я ожидал (а)

.right .box_header {
margin: -10px -1.2% 10px -1.2%;
padding: 5px 0.5% 5px 0.5%;
}

.left .box_header {
margin: -10px -1.2% 10px -1.2%;
padding: 5px 0.5% 5px 0.5%;
}

Answer 1

Если вы хотите сгруппировать несколько селекторов, вы должны полностью объявить их:

.right .box_header, .left .box_header  {
margin: -10px -1.2% 10px -1.2%;
padding: 5px 0.5% 5px 0.5%;
}

Вы не можете использовать , для группировки подшаблонов. См. Рекомендация для селекторов W3C CSS2 или Рекомендация для селекторов W3C CSS3 .

Answer 2

Это потому, что в вашем первом коде вы объявляете ДВА РАЗНЫХ выбора.

i) селектор классов (.right) Стилизует ЛЮБОЙ элемент с прикрепленным классом 'right'.

ii) селектор потомков предков (.left .box_header) Он стилизует любой элемент класса 'box_header', который ДОЛЖЕН БЫТЬ потомком присоединенного элемента класса 'left'.

В то время как во втором коде вы явно объявляете стили для

i) селектор потомков предков (.right .box_header) Стилизует любой элемент класса 'box_header', который ДОЛЖЕН БЫТЬ потомком элемента класса 'right'.

А чтобы правильно объявить оба стиля, вы можете использовать следующий код

.right .box_header, .left .box_header  {
/* Styles here*/
}

ii) селектор потомков предка (.left .box_header) ii) Он стилизует любой элемент класса 'box_header', который ДОЛЖЕН БЫТЬ потомком элемента класса 'right'.

Вот почему оба кода имеют разный эффект.