htmlのクラスの構文上の割り当てで混乱しています

Question

クラスを区切るためのカンマとその不在の違いを理解できません。また、グリッドシステムには「スケルトン」スタイルシートを使用しています。ここでは例です：

<div id="header_buttons" class="eleven columns, header_buttons"> 
    <button type="button"><a href="#">Github</a></button> 
</div> 

そして 'header_buttons' のため：カンマで

.header_buttons { 
    margin-left: 180px; 
} 

、私は私の意図した結果を得る：

しかし、彼らなしでは、私の代わりにこれを取得：

私はコンマを使用しないで複数のクラスを持つことの基礎を知っています。しかし、私の場合、私がそれらを取り除くと、なぜ私は意図した結果を得られないのでしょうか？

Answer 1

スケルトンは.column:first-child { margin-left: 0; }を追加するため、ルールは.header_buttons { margin-left: 180px; }より高い特異性を持つようになります。

あなたのマークアップにカンマがなければ、.column:first-child { margin-left: 0; }は、そのルールが適用されなくなり、そしてあなたが.header_buttonsに指定したルールが適用されるように、スケルトンの.columnクラスを壊していないこと、スケルトンを介して印加されると、あなたがそこにカンマを追加すると.header_buttons { margin-left: 180px; }

が上書きされています。

あなたはここに

.header_buttons { 
 
    margin-left: 180px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet"/> 
 
<div id="header_buttons" class="eleven columns header_buttons"> 
 
    <button type="button"><a href="#">Github</a></button> 
 
</div> 
 

 
<div id="header_buttons" class="eleven columns, header_buttons"> 
 
    <button type="button"><a href="#">Github</a></button> 
 
</div>