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.
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>}
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
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伪类*/[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元素获得焦点后的样式
}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>
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.
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
