Hier ist ein Beispiel, das ich nicht verstehe:
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
Es scheint mir, dass dies width: 460px
auf 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: 460px
dies 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?
css
css-selectors
römisch
quelle
quelle
Antworten:
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:
Bei den Kommas wird eine Regel auf mehrere Klassen angewendet.
Es ist funktional äquivalent zu:
Reduziert aber die Ausführlichkeit.
quelle
.container_12 .grid_6
befasst sich nur die.grid_6
innerhalb gefundene Gegenstände.container_12
Gegenstände.Diese Regel vergleicht einen DOM-Knoten mit einer Klasse
container_12
, die einen Nachkommen (nicht unbedingt eingrid_6
untergeordnetes Element ) mit Klasse hat , und wendet die CSS-Regeln auf das DOM-Element mit Klasse angrid_6
.Wenn Sie
>
zwischen sie setzen, bedeutet dies, dass dergrid_6
Knoten ein direktes untergeordnetes Element des Knotens mit Klasse sein musscontainer_12
.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_12
odergrid_6
.quelle
<space>
und>
zwischen Klassen / IDs erklärt.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:
quelle
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
wendet diesen Stil nur auf Klassen an,
.grid_6
die sich innerhalb der.container_12
Klasse befinden, und auf.grid_8
Klassen, die sich innerhalb der Klasse befinden.container_16
.quelle
Das
width: 460px;
wird auf das Element mit der.grid_8
Klasse angewendet , das in den Elementen mit.container_16
Klasse enthalten ist, und auf Elemente mit der.grid_6
Klasse, 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.
quelle
Sie haben in Ihrem Beispiel vier Klassen und zwei Selektoren:
Also
.container_12
und.grid_6
sind beide Klassen, aber die Regelwidth: 460px
wird nur auf Elemente angewendet, die die.grid_6
Klasse haben, die Nachkommen eines Elements sind, das die.container_16
Klasse hat.Beispielsweise:
quelle
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:
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
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.
quelle
width:460px
wird nur auf.grid_6
und angewendet.grid_8
Edit: Hier ist ein sehr guter Artikel für dich
http://css-tricks.com/multiple-class-id-selectors/
quelle
.grid_6
&.grid_8
innerhalb einer.container_12
or.container_16
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.
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.
}}
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.
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.).
quelle