suchen

Heim >Web-Frontend >CSS-Tutorial >Was sind die Pseudoklassen von CSS3?

Was sind die Pseudoklassen von CSS3?

青灯夜游
青灯夜游Original
2021-12-09 10:48:212933Durchsuche

css3-Pseudoklassen umfassen: „:first-of-type“, „:last-of-type“, „:only-of-type“, „:only-child“, „:last-child“, „ :root“, „:empty“, „:target“, „:not“ usw.

Was sind die Pseudoklassen von CSS3?

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

css3-Pseudoklasse

:only-of-typep:only-of-type Wählt das einzige p-Element aus, für das jedes p-Element sein übergeordnetes Element ist3:only-child p:only- child Wählt jedes p-Element aus, das das einzige untergeordnete Element seines übergeordneten Elements ist das zweite untergeordnete Element seines übergeordneten Elements 3:nth-last-child(n)p:nth-last-child(2)Wählen Sie aus, dass jedes p-Element das zweite untergeordnete Element seines Elements ist Elternteil, gezählt vom letzten Kind 3:nth-of-type(p:nth-of-type(2) Wählen Sie jedes A p-Element aus, das das zweite p-Element von ist sein übergeordnetes Element 3:nth-last-of-type(p:nth-last-of-type(2)select Jedes p-Element ist das zweite p-Element seines übergeordneten Elements , gezählt vom letzten Kind 3:last-child Wählen Sie jedes p-Element als sein übergeordnetes Element aus. Das letzte untergeordnete Element der Ebene. 3:root:root3:emptyp:empty Wählt jedes p-Element (einschließlich Textknoten) aus, das dies nicht tut keine Kinder haben) 3:target#news:target Wählt das aktuell aktive #news-Element (die angeklickte URL, die diesen Ankernamen enthält) 3:enabledinput :enabledWählen Sie jedes aktivierte Eingabeelement aus3:disabledinput:disabledWählen Sie jedes deaktivierte Eingabeelement aus3:checkedinput:checkedWählen Sie jeden ausgewählten Eingang aus elements3:not():not(p)Wählen Sie jedes Element aus, das kein p-Element ist3:out-of-range:out- of-rangeübereinstimmende Eingabeelemente, deren Wert außerhalb des angegebenen Bereichs liegt3:in-range:in-range 3:read-write:read-write wird verwendet, um lesbare und beschreibbare Elemente abzugleichen 3:read-only:read-only wird verwendet, um Einstellungen abzugleichen Das „readonly“-Attribut Anzahl der Elemente 3:optional:optional wird verwendet, um optionale Eingabeelemente abzugleichen 3:erforderlich:erforderlich Entspricht Elementen mit dem Attributsatz „erforderlich“. 3:valid:valid wird verwendet, um Elemente abzugleichen, deren Eingabewert zulässig ist

Lassen Sie uns anhand von Beispielen etwas über einige CSS3-Pseudoklassen lernen.

:first-of-type

Wählt alle Elemente aus, die das erste untergeordnete Element eines bestimmten Typs ihres übergeordneten Elements sind alle Elemente, die das letzte untergeordnete Element eines bestimmten Typs seines übergeordneten Elements sind Element alle Elemente


: nur untergeordnetes Element Jedes Element auswählen 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p:first-of-type").css("background-color","pink");
});
</script>
</head>
<body>
 
<p>p</p>
 
<div>
	<p>p1</p>
	<p>p2</p>
</div><br>
 
<div>
	<span>span</span>
	<p>p1</p>
	<p>p2</p>
</div>
</body>
</html>



:nth-child(n)

Wählt alle aus Elemente, die das n-te untergeordnete Element sind eines beliebigen Typs, der zu seinem übergeordneten Element gehört

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p:last-of-type").css("background-color","pink");
});
</script>
</head>
<body>
 
<div>
	<p>p1</p>
	<p>p2</p>
</div><br>
 
<div>
        <p>p1</p>
	<p>p2</p>
        <span>span</span>
</div>
</body>
</html>

:nth-last-child(n)

Wählt das n-te untergeordnete Element aus, das zu seinem übergeordneten Element eines beliebigen Typs gehört. Alle Elemente des untergeordneten Elements , gezählt ab dem letzten untergeordneten Element. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p:only-of-type").css("background-color","pink");
});
</script>
</head>
<body>
 
<div style="border:1px solid;">
<p>p1</p>
<p>p2</p>
</div><br>
 
<div style="border:1px solid;">
<p>p</p>
</div><br>
 
<div style="border:1px solid;">
<span>span</span>
<p>p</p>
</div><br>
 
</body>
</html>

:nth-of-type(n)

Wählt alle Elemente aus, die das n-te untergeordnete Element eines bestimmten Typs ihres übergeordneten Elements sind

( Lernen Sie das Teilen von Videos: CSS-Video-Tutorial

)

Selektor Beispiel Beispielbeschreibung CSS
:first-of-type p:first-of-type Wählen Sie jeweils die Seite aus Das Element ist das erste p-Element seines übergeordneten Elements
n)
n)
p:last-child
Wählt das Stammelement des Dokuments aus
selector
übereinstimmende Eingabeelemente, deren Wert innerhalb des angegebenen Bereichs liegt

Das obige ist der detaillierte Inhalt vonWas sind die Pseudoklassen von CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So legen Sie den halben Hintergrund in CSS festNächster Artikel：So legen Sie den halben Hintergrund in CSS fest

In Verbindung stehende Artikel

Mehr sehen