Was bedeuten Kommas und Leerzeichen in mehreren Klassen in CSS?

Hier ist ein Beispiel, das ich nicht verstehe:

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

Es scheint mir, dass dies width: 460pxauf alle oben genannten Klassen angewendet wird. Aber warum werden einige Klassen durch ein Komma ( ,) und andere nur durch ein Leerzeichen getrennt?

Ich gehe davon aus, dass width: 460pxdies nur auf diejenigen Elemente angewendet wird, die Klassen auf die in der CSS-Datei angegebene Weise kombinieren. Zum Beispiel wird es auf angewendet, <div class='container_12 grid_6'>aber es wird nicht auf die angewendet <div class='container_12'>. Ist diese Annahme richtig?

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

Das heißt "mache alle .grid_6 innerhalb von .container_12 und alle .grid_8 innerhalb von .container_16 460 Pixel breit." Beide der folgenden Elemente werden also gleich wiedergegeben:

<div class="container_12">
  <div class="grid_6">460px Wide</div>
</div>
<div class="container_16">
  <div class="grid_8">460px Wide</div>
</div>

Bei den Kommas wird eine Regel auf mehrere Klassen angewendet.

.blueCheese, .blueBike {
  color:blue;
}

Es ist funktional äquivalent zu:

.blueCheese { color:blue }
.blueBike { color:blue }

Reduziert aber die Ausführlichkeit.

.container_12 .grid_6 { ... }

Diese Regel vergleicht einen DOM-Knoten mit einer Klasse container_12, die einen Nachkommen (nicht unbedingt ein grid_6untergeordnetes Element ) mit Klasse hat , und wendet die CSS-Regeln auf das DOM-Element mit Klasse an grid_6.

.container_12 > .grid_6 { ... }

Wenn Sie >zwischen sie setzen, bedeutet dies, dass der grid_6Knoten ein direktes untergeordnetes Element des Knotens mit Klasse sein muss container_12.

.container_12, .grid_6 { ... }

Ein Komma ist, wie andere angegeben haben, eine Möglichkeit, Regeln gleichzeitig auf viele verschiedene Knoten anzuwenden. In diesem Fall gelten die Regeln für jeden Knoten mit einer Klasse von container_12oder grid_6.

Nicht genau das, was gefragt wurde, aber vielleicht hilft das.

Um einen Stil nur dann auf ein Element anzuwenden, wenn beide Klassen vorhanden sind, sollte Ihr Selektor kein Leerzeichen zwischen den Klassennamen verwenden.

Beispielsweise:

.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>

Komma gruppiert die Klassen (wendet auf alle den gleichen Stil an). Ein leeres Leerzeichen gibt an , dass sich der folgende Selektor innerhalb des ersten Selektors befinden muss.

Deshalb

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

wendet diesen Stil nur auf Klassen an, .grid_6die sich innerhalb der .container_12Klasse befinden, und auf .grid_8Klassen, die sich innerhalb der Klasse befinden .container_16.

Das width: 460px;wird auf das Element mit der .grid_8Klasse angewendet , das in den Elementen mit .container_16Klasse enthalten ist, und auf Elemente mit der .grid_6Klasse, die in den Elementen mit Klasse enthalten sind.container_12 .

Der Raum bedeutet Erbe und das Komma bedeutet "und". Wenn Sie Eigenschaften mit einem Selektor wie hinzufügen
.class-a, .class-b, werden die Eigenschaften auf die Elemente mit einer der beiden Klassen angewendet.

Hoffe ich habe geholfen.

Sie haben in Ihrem Beispiel vier Klassen und zwei Selektoren:

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

Also .container_12und .grid_6sind beide Klassen, aber die Regel width: 460pxwird nur auf Elemente angewendet, die die .grid_6Klasse haben, die Nachkommen eines Elements sind, das die .container_16Klasse hat.

Beispielsweise:

<div class="container_16">
<p class=".grid_6">This has a width of 480px.</p>
<p>This has an unknown width.</p>
</div>

Das Obige bedeutet, dass Sie Stile auf zwei Klassen anwenden, die durch das Komma gekennzeichnet sind.

Wenn Sie zwei Elemente nebeneinander sehen, die nicht getrennt sind, können Sie davon ausgehen, dass sie sich auf einen Bereich innerhalb eines Bereichs beziehen. Daher gilt dieser Stil oben nur für grid_6-Klassen innerhalb von container_12-Klassen und grid_8-Klassen innerhalb von container_16-Klassen.

im Beispiel:

<div class="grid_6">This is not effected</div>
<div class="container_12">
  <div class="grid_6">
    This is effected.
  </div>
</div>

Das erste grid_6 wird nicht ausgeführt, während die zweite grid_6-Klasse ausgeführt wird, da es in einem container_12 enthalten ist.

Eine Aussage wie

#admin .description p { font-weight:bold; }

Würde nur das Fettdruck auf anwenden

Tags in Bereichen mit der Klasse "description", die sich in einem Bereich mit der ID "admin" befinden, z.

<div id="admin">
   <div class="description">
      <p>This is bold</p>
   </div>
</div>

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

width:460pxwird nur auf .grid_6und angewendet.grid_8

Edit: Hier ist ein sehr guter Artikel für dich

http://css-tricks.com/multiple-class-id-selectors/

Selektorkombinationen haben unterschiedliche Bedeutungen - das angehängte Bild lässt sich leicht erklären

a) Mehrere durch Komma getrennte Selektoren („,“) - Auf alle ausgewählten Elemente werden dieselben Stile angewendet.

div,.elmnt-color {
   border:1px solid red;
}

Hier wird der Rahmenstil auf DIV-Elemente und auf Elemente der CSS-Klasse (.elmnt-color) angewendet.

b) Mehrere durch Leerzeichen getrennte Selektoren - Diese werden als Nachkommen-Selektoren bezeichnet.

div .elmnt-color {
background-color:red;

}}

Hier wird der Rahmenstil auf Elemente der CSS-Klasse (.elmnt-color) angewendet, die untergeordnete Elemente des DIV-Elements sind.

c) Mehrere Selektoren ohne Leerzeichen angegeben - Hier werden Stile auf Elemente angewendet, die alle Kombinationen erfüllen.

div.elmnt-color {
    border:1px solid red;
}

Hier wird der Rahmenstil nur auf DIV-Elemente angewendet, die von der CSS-Klasse (.elmnt-color) angewendet werden.

Details finden Sie unter https://www.csssolid.com/css-tips.html

Hinweis: Die CSS-Klasse ist einer der CSS-Selektoren. Die obige Regel gilt für alle CSS-Selektoren (z. B. Klasse, Element, ID usw.).