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 selectors recommendationまたはW3C CSS3 selectors recommendationを参照してください。

Answer 2

これは、最初のコードでは2つの異なる選択を宣言しているためです。

i）クラスセレクタ（.right） クラス 'right'を持つ任意の要素をスタイルします。

II）祖先子孫セレクタ（.LEFT .box_header） このスタイルクラスの要素の子孫でなければなりませんクラスのbox_header 'の任意の要素は、添付の「左」。

明示的に私は

のスタイルを宣言する2番目のコードにある間）クラスの要素の子孫でなければなりません祖先子孫セレクタ（.RIGHT .box_header） このスタイルクラスの任意の要素「box_header」「右'添付されています。

、正しく次のコード

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

II）祖先子孫セレクタ（.LEFT .box_header）ⅱ） このスタイル子孫でなければならないクラスのbox_header "のいずれかの要素を使用することができます両方のスタイルを宣言するためのクラス「右」の要素が添付されています。

これは、両方のコードが異なる効果を持つ理由です。