Was ist der Unterschied, wo Elemente in der CSS-Klasse platziert werden?

Question

Ich kann CSS arbeiten lassen, aber einige Dinge verstehe ich nicht wirklich.

Alle sehr deutlich die Unterschiede zwischen erklären Ressource:

p .example 
p.example 
.example p 
.example.p 

Und:

p h1 .example 
p h1 .example 
.example p h1 
.example.p h1 

Oder:

p, h1 .example 
p, h1 .example 
.example p, h1 
.example.p, h1 

ect ....

ich kann Sieh die Veränderungen, wenn ich ex Periment, aber ich verstehe nicht, was ich tue!

Answer 1

p .example

<p>Lorem<span class="example">ipsum</span></p> 

p.example

<p class="example">Lorem ipsum</p> 

.example p

<div class="example"><p>Lorem ipsum</p></div> 

.example.p

<div class="example p">Lorem ipsum</div> 

Und:

p h1 .example -> Nicht-Standard-HTML-

<h1 class="example">Title Here</h1><p class="example"></p> 

p h1 .example -> Nicht-Standard-HTML-

<p class="example"></p><h1 class="example"></h1> 

.example p h1 -> Nicht-Standard html

<div class="example"><p>Lorem Ipsum</p><h1>Title Here</h1></div> 

.example.p h1

<div class="example p"><h1>Title Here</h1></div> 

Oder:

p, h1 .example

<p>Lorem Ipsum</p><h1 class="example"></h1> 

p, h1 .example -> wiederholt .example p, h1

<div class="example"><p>Lorem ipsum</p></div><h1>Title Here</h1> 

.example.p, h1

<div class="example p">some text here</div><h1>Title Here</h1> 

Answer 2

Erklärung der Syntaxen

weißer Raum legt Kindknoten jede Ebene tief

p .example = nehmen p Tag als Elternteil ein Element auswählen, die Klasse ist, ist example, die unter jeder Ebene unter diesem existieren kann Elternelement

p.example = Wählen Sie ein Element aus, das ein -Tag ist und eine Klassehat

.example p = mit Klasse example als Eltern Aufnahmeelement ein Element auszuwählen, die p-Tag ist, die

.example.p = wählen Sie ein Element unter jeder Ebene unter diesem übergeordneten Elemente bestehen kann, die sowohl example und p als eine Klasse enthält, (Anmerkung sogar p wird als eine Klasse angesehen, da sie mit einem . Operator verwendet wird)

---

p h1 .example = vonstartenTag navigieren zu h1 Tag jeder Ebene tief ein und wählen Sie Elemente mit Klasse example, das jede Ebene tief in h1 Tag existieren kann

p h1.example = von p Tag auswählen h1 Tag starten, die eine Klasse hat example die tief jede Ebene existieren kann innerhalb dieser p Tag

.example p h1 = aus einem Elemente mit Klasse starten example und innerhalb dieses Elements zu einem p-Tag (jede Ebene tief) navigieren und wählen Sie die alle h1 Tags (jede Ebene tief) unter diesem p Tag

.example.p h1 = von einem Element beginnen mit den beiden Klassen example und p und wählen Sie die alle h1 Tags (jede Ebene tief) unter diesem Element

---

, gibt mehrere Sektoren.

Beispiel: wenn ich will div Tags alle p Tags, machen, span Tags als Hintergrund rot, dann kann ich sie alle in einem CSS-Selektor auswählen und eine bestimmte Regel einmal geben, wie unten

p, div, span{ 
background-color: red; 
} 

p, h1 .example = Wählen Sie Tag, und wählen Sie ein Element mit der Klasse example, die unter h1 Tag jeder Ebene tief eingepackt ist.

Inzwischen bin ich sicher, dass Sie den Rest drei Syntaxen p, h1 .example, .example p, h1, .example.p, h1

Answer 3

p .example verstehen würde -> Das heißt, Sie sind Klasse Targeting als „Beispiel“ genannt innerhalb eines Absatzes (p) Tag handeln.

p.example -> Erzeugt das gleiche Ergebnis wie oben.

.example p -> Das heißt, Sie zielen auf Absatz (p) -Tag innerhalb einer Klasse namens "Beispiel".

.example.p -> Dies bedeutet, dass Sie auf die Klasse "p" abzielen, die in einer Klasse namens "example" agiert.

p h1 .example -> Ziele "Beispiel" -Klasse innerhalb eines "h1" -Tags, die in einem "p" -Tag ist.

p h1 .example -> Erzeugt das gleiche Ergebnis wie oben.

.example p h1 -> Ziele "h1" Tag innerhalb eines "p" Tags, das in einer "Beispiel" -Klasse ist.

.example.p h1 -> Targets "h1" -Tag innerhalb einer "p" -Klasse, die innerhalb einer "Beispiel" -Klasse ist.

p, h1 .example -> Hier hat Klasse "Beispiel" innerhalb eines "h1" -Tags die gleiche Eigenschaft wie "p" -Tag.

p, h1 .example -> Erzeugt das gleiche Ergebnis wie oben.

.example p, h1 -> Hier hat das Tag "p" innerhalb eines "Beispiel" -Tags dieselbe Eigenschaft wie das "h1" -Tag.

.example.p, h1 -> Hier hat die Klasse "p" innerhalb eines "Beispiel" -Tags dieselbe Eigenschaft wie "h1" -Tag.

Answer 4

FYI auf Terminologie, was Sie beziehen sich auf Selektoren.

Ich werde jeden erklären:

p .example 

Wählt alle Nachkommen eines p Element mit Klasse example.

p.example 

Wählt alle p Elemente mit Klasse example.

.example p 

Wählt alle p Nachkommen eines Elements mit Klasse example.

.example.p 

Wählt alle Elemente mit Klasse example und Klasse p.

p h1 .example 

Wählt alle Nachkommen eines h1 innerhalb eines p mit Klasse example.

p, h1 .example 

Wählt alle p Elemente und alle Nachkommen eines h1 mit Klasse example.

.example p h1 

Wählt alle h1 Elemente, die aus einem Element p abstammen, die mit Klasse example von einem Element abstammen.

.example.p h1 

Wählt alle h1 Elemente, die mit Klasse example und Klasse p Abkömmlinge eines Elements sind.

.example p, h1 

Wählt alle p Elemente, die mit Klasse example Abkömmlinge eines Elements sind und alle Elemente h1.

.example.p, h1 

Wählt alle Elemente sowohl mit Klasse example und Klasse p und alle h1 Elemente.

---

Wie CSS

CSS zu lesen ist manchmal schwierig zu interpretieren. Ich habe festgestellt, dass es am einfachsten ist, es rückwärts zu lesen.

Nehmen Sie das erste Beispiel:

p .example 

beginnen am äußersten rechten Punkt .example. Das bedeutet, dass nur Elemente mit der Klasse example ausgewählt werden. Da es eine davor gibt (mit einem Leerzeichen dazwischen), die die Auswahl auf Nachkommen von p Elementen "verengt".

Im zweiten Beispiel:

p.example 

Auch hier ist der am weitesten rechts stehende Artikel .example. Das bedeutet, dass nur Elemente mit der Klasse example ausgewählt werden. Da zuvor ein vorhanden ist (diesmal kein Leerzeichen), wird die Auswahl auf p Elemente mit dieser Klasse beschränkt.

Hier ist ein Beispiel-HTML-Schnipsel mit einer Beschreibung von dem Beispiel wählt, welches Element:

<p class="example">This element will be selected by the second example</p> 
<p> <!-- this p element will not be selected by either example --> 
    <span class="example">This element will be selected by the first example</span> 
</p> 

Commas

Selektoren Komma getrennt sein kann. Nehmen Sie das folgende Beispiel:

p, h1 { 
    color: red; 
} 

Dies wählt alle p Tags und alle h1 Tags und rot färbt.