Was bedeuten Kommas und Leerzeichen in mehreren Klassen in CSS?

92

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?

römisch
quelle
Ich weiß, dass dies Ihre Frage nicht beantwortet, aber ich möchte eine Empfehlung für den Versuch von SASS abgeben. Es sieht so aus, als würden Sie eine Menge dupliziertes CSS haben, wenn man die Klassennamen berücksichtigt.
Chuck Callebs
1
@Roman Es könnte auch `.container_12 .grid_6.line` geben. Hinweis, kein Leerzeichen zwischen grid_6 und line; Dies bedeutet, dass das Element sowohl grid_6 als auch line als Klassen haben sollte. Und es sollte ein Kind von 'container' sein, wie @Sampson in der akzeptierten Antwort hervorhebt :)
Paulo

Antworten:

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

Sampson
quelle
1
Ich verstehe, dass wir eine Regel auf mehrere Klassen anwenden können, die durch Komas getrennt sind. Mir ist nicht klar, warum einige Klassen im Beispiel nicht durch Kommas getrennt sind.
Roman
8
Wenn sie durch ein Leerzeichen getrennt sind, handelt es sich um ein Verschachtelungsproblem. Letztere sind in ersteren zu finden. So .container_12 .grid_6befasst sich nur die .grid_6innerhalb gefundene Gegenstände .container_12Gegenstände.
Sampson
32
.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.

Steve Madsen
quelle
andere sagten und nicht oder?
Kick Buttowski
Tolle Antwort Ich mag die Tatsache, dass es den Unterschied von <space>und >zwischen Klassen / IDs erklärt.
Alex Lowe
13

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>

Alan Peabody
quelle
7

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.

Cloudanger
quelle
6

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.

3rgo
quelle
3

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>
James Sumners
quelle
3

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>
ungeschickte Finger
quelle
Das hilft wirklich! Besonders die Illustration von # gefolgt von einem '.'.
Shao-Kui
1
.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/

Jitendra Vyas
quelle
3
Nur wenn .grid_6& .grid_8innerhalb einer .container_12or.container_16
sshow
@sshow - Danke. Sie haben Recht, aber das ist ein HTML-Problem. Nach diesem CSS-Code ist meine Antwort richtig
Jitendra Vyas
-2

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

Selva
quelle