Zusammenfassung der Verwendung von CSS-Selektoren

Dieses Mal werde ich Ihnen eine Zusammenfassung der Verwendung von CSS-Selektoren und der Vorsichtsmaßnahmen für die Verwendung von CSS-Selektoren geben. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

CSS-Selektor

1.id-Selektor #id{ }, „#id“ wählt das Element
2. Klasse selector.class{}, „.class name“ wählt Element
3. Tag-Selektor p{ }, „Tag-Name“ wählt Element aus
4. Platzhalter-Selektor { }, „“ Alle Elemente auswählen
5. Kombinierte Selektoren:
Gruppenselektoren E, F "," durch Kommas getrennt, E- und F-Elemente gleichzeitig auswählen
Nachkommenselektoren E F durch Leerzeichen getrennt, alle F auswählen Elemente unter dem E-Element (egal wie viele Ebenen das F-Element verschachtelt ist, es wird trotzdem ausgewählt)
Direkter Unterselektor E > F ">" trennt, wählt das direkte Unterelement F unter E aus Element, Das heißt, das Unterelement der ersten Ebene F
benachbarter Geschwisterselektor E + F unter dem E-Element, „+“ trennt das direkt benachbarte Element F nach der Auswahl das E-Element
Allgemeiner benachbarter Selektor E ~ F, „~“ trennt alle Geschwisterelemente F nach dem ausgewählten E-Element und
6. Pseudoklassenselektor L-V-H-A, :link,:visited,:hover,:active
7. Pseudoelementselektor
E::first-line wählt die erste Zeile des E-Elementinhalts aus
E::first-letter wählt das E-Element aus Inhalt Der erste Buchstabe von
E::before fügt Inhalt vor dem E-Element ein.
E::after fügt Inhalt nach dem E-Element ein.
before und after sind Stellen, an denen zusätzlicher Inhalt eingefügt werden kann und abgeglichen werden muss mit Inhaltsattributverwendung
8.Attributselektor
input[type="text"] {
width:150px>}

---

selektor Die Priorität des

CSS-Selektorprioritätskerns: Jeder Selektor hat seine eigene Priorität. Je spezifischer der Bereich, desto höher die Priorität. CSS-Prioritäten von hoch nach niedrig sind:
1. Die Verwendung von !important nach einem Attribut überschreibt den an einer beliebigen Stelle auf der Seite definierten Elementstil.
2. Inline-Stile, die als Stilattribute auf Element-Tags geschrieben sind
4. Pseudo-Klassen-Selektoren
7 Selektor
8. Wildcard-Selektor
9. Browser-Anpassung
Wenn die CSS-Stilregel aus mehreren Selektoren besteht, beträgt die Gewichtung des ID-Selektors 1000. Der Klassenselektor ist 100 und der Label-Selektor ist 10. Was welche Priorität hat, wird durch die Summe der Gewichte bestimmt. Wenn die Gewichte zweier CSS-Regeln gleich sind, wird die spezifischere verwendet, d. h. der Selektor mit der höheren Gewichtung ist spezifischer und hat eine höhere Priorität. Wenn die beiden Auswahlregeln und -gewichte gleich sind, überschreibt der spätere Stil den vorherigen!
p {color: #333;}
p {color: #666;}
Auf diese Weise wird die Farbe der p-Kopie offensichtlich #666 sein


Verwendung Szenarien von Klasse und ID

id ist eine eindeutige Kennung auf der Seite, und die Klasse identifiziert einen bestimmten Stiltyp auf der Seite. Sie ist universell und kann wiederholt verwendet werden. Der Klassenname eines Elements kann als class = „intro other“ geschrieben werden, dh es können mehrere Klassennamen vorhanden sein, was bedeutet, dass die Stile, die den beiden Klassennamen entsprechen, überlagert werden. Der ID-Name kann nicht so geschrieben werden. ID-Namen werden häufig im Seitenlayout verwendet (Markierung großer Rahmen), und Klassen werden im Allgemeinen in lokalen Seitenlayouts zur Stildefinition verwendet. Da der Klassenname bei der Benennung gleich geschrieben werden kann, müssen Sie den Stil nur einmal für die Klasse schreiben und es kann von jedem verwendet werden. Elemente desselben Stils wiederverwenden.

---

Begrenzen Sie geeignete Namespaces bei der Verwendung von CSS-Selektoren, um die Lesbarkeit des Codes zu verbessern und die Wartung zu erleichtern

---

Beispiele für die Verwendung von Selektoren

html
#header{} /*选中id为header的元素*/
.header{}    /*选中class=header的元素*/ 
.header .logo{}  /*选中class=header下的所有class=logo的元素*/ 
.header.mobile{}  /*选中class="header mobile"的元素*/ 
.header p, .header h3{}  /*选中class=header元素下的所有p元素，同时选中class=header元素下的所有h3元素*/ 
#header .nav>li{}  /*选中id=header元素下的所有class=nav元素的直接子元素li*/ 
#header a:hover{}  /*选中id=header元素下的所有a元素，并使用hover伪类*/

---

Gemeinsame Pseudoklassenselektoren

[1]Strukturelle Pseudoklassenselektoren
E: first-child wählt das erste untergeordnete Element unter dem übergeordneten Element aus, in dem sich E befindet, und das untergeordnete Element ist das E-Element
E:last-child wählt das letzte untergeordnete Element unter dem übergeordneten Element aus, in dem sich E befindet, und das untergeordnete Element Element ist das E-Element.
E:root wählt das Element des Wurzelknotens aus, in dem sich E befindet. Für HTML wählt es das HTML-Element aus.
E:nth-child(n) wählt das n-te untergeordnete Element aus übergeordnetes Element, in dem sich E befindet, und das untergeordnete Element ist das E-Element.
E:nth-last-child(n) Wählt das n-te untergeordnete Element von unten unter dem übergeordneten Element aus, in dem sich E befindet, und das untergeordnete Element ist das E-Element
E:nth-of-type(n) Wählt das übergeordnete Element aus, in dem sich E befindet. Das n-te E-Element
unter den gleichen Typelementen unter dem Element E:first-of-type wählt das erste aus E-Element unter den Elementen desselben Typs unter dem übergeordneten Element, in dem sich E befindet
E:last-of-type wählt das letzte E-Element unter den Elementen desselben Typs unter dem übergeordneten Element aus, in dem sich E befindet
E:only-child entspricht dem einzigen untergeordneten Element innerhalb des übergeordneten Elements, was äquivalent ist zu: first-child:last-child oder:nth-child(1):nth-last-child(1)
E :only -of-type entspricht dem einzigen untergeordneten Element, das denselben Tag unter dem übergeordneten Element verwendet, was äquivalent zu :first-of-type:last-of-type oder :nth-of-type(1):nth-last-of ist -type(1)
E:empty stimmt mit einem Element überein, das keine untergeordneten Elemente hat, und das Element hat keine Textknoten
E:not(F) stimmt mit jedem Element überein, das nicht mit dem aktuellen Selektor übereinstimmt
【2】
Dynamischer PseudoklassenselektorSequenz L-V-H-A link-visited-hover-active

a:link{
 color:red;
 }
 
 a:visited{
 color:blue;
 }
 
 a:hover{
 color:gree;
 font-size:20px;
 }
 
 a:active{
 color:gold;
 }
 a:focus{
 color:gold; //a元素获得焦点后的样式
 }

Die Rolle und der Unterschied zwischen:first-child und :first-of-type

E:first-child gibt das Element E an und findet das erste E-Element unter seinem übergeordneten Element

E:first-of-type gibt das Element vom Typ E an und findet das Geben Sie E unter seinem übergeordneten Element ein. Das erste

---

Codebeispiel des Elements:

html
<style>
.item1:first-child{ color: red;}
.item1:first-of-type{ background: blue;}
</style> 
<p> 
</p><p>aa</p>
<h3>bb</h3>
<h3>ccc</h3> 

class= Das übergeordnete Element des Elements „item1“ p Das erste untergeordnete Element unter „item1“ hat eine rote Schriftart .item1:first-child{color:red;}Obwohl class=item1 ist, handelt es sich nicht um das erste untergeordnete Element unter seinem übergeordneten Element. <h3>bb<h3>,<h3>ccc<h3></h3> </h3> </h3> </h3>

Das erste Element von class=item1 unter Elementen desselben Typs unter dem übergeordneten Element des Elements class=item1. Derselbe Elementtyp (p, h3) unter dem übergeordneten Element p von .item1:first-of-type{background:blue;} wählt das erste aus, aa, bb, mit blauem Hintergrund. <p class="item1">aa</p>

---

text-align: Die Rolle der Mitte

Legt die horizontale Mittelausrichtung des Textes innerhalb des Elements fest. text-align wird auf Elemente auf Blockebene (p oder p) angewendet.

kann die Ausrichtung für die Inline-Elemente (Text, Bilder, Eingabefelder) innerhalb des Elements auf Blockebene (p/p) festlegen. text-align hat 5 Werte: links/rechts/zentriert/ausrichten/erben, linksbündig/rechtsbündig/zentriert/an beiden Enden ausgerichtet/Ausrichtungswert des übergeordneten Elements erben. Beim Blocksatz an beiden Enden kann es zu inkonsistenten Wortabständen in den einzelnen Zeilen kommen.

---

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Wie gehe ich mit verweigertem Zugriff auf die MySQL-Datenbank um?

Detaillierte Erläuterung der Schritte zur Verwendung der Vorderseite -End-Testpyramide

Das obige ist der detaillierte Inhalt vonZusammenfassung der Verwendung von CSS-Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!