これは私が理解できない例です：
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}その私には思えるwidth: 460px上記の全てのクラスに適用されます。しかし、なぜいくつかのクラスはコンマ（,）で区切られ、一部はスペースで区切られているのでしょうか。
width: 460pxCSSファイルで言及されている方法でクラスを組み合わせる要素にのみ適用されると思います。たとえば、には適用されます<div class='container_12 grid_6'>が、には適用されません<div class='container_12'>。この仮定は正しいですか？
回答:
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}それは「すべての.grid_6を.container_12内に、すべての.grid_8を.container_16の幅460ピクセル内に作成する」と述べています。したがって、次の両方が同じようにレンダリングされます。
<div class="container_12">
<div class="grid_6">460px Wide</div>
</div>
<div class="container_16">
<div class="grid_8">460px Wide</div>
</div>コンマについては、このように1つのルールを複数のクラスに適用しています。
.blueCheese, .blueBike {
color:blue;
}機能的には以下と同等です。
.blueCheese { color:blue }
.blueBike { color:blue }しかし、冗長性を減らします。
.container_12 .grid_6、.grid_6アイテム内で見つかったアイテムのみに対処してい.container_12ます。
.container_12 .grid_6 { ... }このルールcontainer_12は、class を持つ子孫（必ずしも子ではない）を持つクラスを持つDOMノードに一致し、class を持つgrid_6DOM要素にCSSルールを適用しますgrid_6。
.container_12 > .grid_6 { ... }>それらの間に置くことはgrid_6、ノードがクラスを持つノードの直接の子でなければならないことを言いますcontainer_12。
.container_12, .grid_6 { ... }他の人が述べたように、コンマは一度に多くの異なるノードにルールを適用する方法です。この場合、ルールはクラスのいずれかとの任意のノードに適用されcontainer_12、またはgrid_6。
<space>それ>がクラス/ IDの違いを説明しているという事実が好きです。
正確には何が尋ねられたのかではありませんが、多分これは役立つでしょう。
要素に両方のクラスがある場合にのみスタイルを要素に適用するには、セレクターがクラス名の間にスペースを使用しないようにする必要があります。
例えば：
.class1.class2 { color: #f00; }
.class1 .class2 { color: #0f0; }
.class1, .class2 { font-weight: bold; }<div class='class1 class2'>Bold Red Text</div>
<div class='class1'>Bold Text (not red)</div>
<div class='class1'><div class='class2'>Bold Green Text</div></div>コンマはクラスをグループ化し（すべてに同じスタイルを適用）、空のスペースは次のセレクターが最初のセレクター内になければならないことを示します。
したがって
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}そのスタイルを、クラス.grid_6内にある.container_12クラスと内にあるクラスにのみ適用し.grid_8ます.container_16。
この例では、4つのクラスと2つのセレクターがあります。
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}だから、.container_12および.grid_6両方のクラスですが、ルールがwidth: 460px唯一持っている要素に適用される.grid_6必要があり要素の子孫であるクラスの.container_16クラスを。
例えば：
<div class="container_16">
<p class=".grid_6">This has a width of 480px.</p>
<p>This has an unknown width.</p>
</div>上記は、2つのクラスにスタイルを適用することを意味し、カンマで示されます。
分離していない2つの要素が並んでいる場合、それは領域内の領域を参照していると見なすことができます。したがって、上記では、このスタイルは、container_12クラス内のgrid_6クラスおよびcontainer_16クラス内のgrid_8クラスにのみ適用されます。
例では：
<div class="grid_6">This is not effected</div>
<div class="container_12">
<div class="grid_6">
This is effected.
</div>
</div>最初のgrid_6は影響を受けませんが、2番目のgrid_6クラスはcontainer_12内に含まれているため、影響を受けません。
のようなステートメント
#admin .description p { font-weight:bold; }太字のみを適用します
次のように、IDが「admin」のエリア内にある、クラスが「description」のエリア内のタグ：
<div id="admin">
<div class="description">
<p>This is bold</p>
</div>
</div>.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}width:460pxのみに適用される.grid_6と、.grid_8
編集：これはあなたにとってとても良い記事です
.grid_6＆.grid_8がa .container_12または.container_16
セレクターの組み合わせの意味は異なります-添付画像で簡単に説明
a）コンマ（“、”）で区切られた複数のセレクター-同じスタイルが選択されたすべての要素に適用されます。
div,.elmnt-color {
border:1px solid red;
}ここでは、境界線スタイルがDIV要素に適用され、CSSクラス（.elmnt-color）が適用された要素に適用されます。
b）スペースで区切られた複数のセレクタ–これらは子孫セレクタと呼ばれます。
div .elmnt-color {
background-color:red;}
ここで、境界線スタイルは、DIV要素の子要素であるCSSクラス（.elmnt-color）適用要素に適用されます。
c）スペースなしで指定された複数のセレクター-ここでのスタイルは、すべての組み合わせを満たす要素に適用されます。
div.elmnt-color {
border:1px solid red;
}ここで、ボーダースタイルはCSSクラス（.elmnt-color）に適用されたDIV要素にのみ適用されます。
詳細はhttps://www.csssolid.com/css-tips.htmlに添付されています
注：CSSクラスはCSSセレクターの1つです。上記のルールは、すべてのCSSセレクター（例：クラス、要素、IDなど）に適用されます。