Was sind die Pseudoklassen von CSS3?-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

Was sind die Pseudoklassen von CSS3?

青灯夜游

Dec 09, 2021 am 10:48 AM

css3 伪类

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>

Nach dem Login kopieren

: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>

Nach dem Login kopieren

: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>

Nach dem Login kopieren

: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!

Erklärung dieser Website

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

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Mehr anzeigen

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung
2 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Chat -Befehle und wie man sie benutzt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Mehr anzeigen

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Mehr anzeigen

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7518

15

CakePHP-Tutorial

1378

52

Wie lautet das Format des Kontonamens von Steam?

81

11

Win11 -Aktivierungsschlüssel dauerhaft

53

19

NYT -Verbindungen Hinweise und Antworten

21

67

Mehr anzeigen

Related knowledge

Wie erzielt man mit reinem CSS3 einen Welleneffekt? (Codebeispiel) Jun 28, 2022 pm 01:39 PM
Wie erzielt man mit reinem CSS3 einen Welleneffekt? In diesem Artikel erfahren Sie, wie Sie mit SVG- und CSS-Animationen Welleneffekte erstellen.

Verwenden Sie CSS geschickt, um verschiedene seltsam geformte Schaltflächen zu realisieren (mit Code). Jul 19, 2022 am 11:28 AM
Dieser Artikel zeigt Ihnen, wie Sie mithilfe von CSS auf einfache Weise verschiedene seltsam geformte Schaltflächen realisieren können, die häufig vorkommen. Ich hoffe, dass er Ihnen hilfreich sein wird!

So verstecken Sie Elemente in CSS, ohne Platz zu beanspruchen Jun 01, 2022 pm 07:15 PM
Zwei Methoden: 1. Fügen Sie mit dem Anzeigeattribut einfach den Stil „display:none;“ zum Element hinzu. 2. Verwenden Sie die Attribute „position“ und „top“, um die absolute Positionierung des Elements festzulegen, um das Element auszublenden. Fügen Sie dem Element einfach den Stil „position:absolute;top:-9999px;“ hinzu.

So implementieren Sie Spitzenränder in CSS3 Sep 16, 2022 pm 07:11 PM
In CSS können Sie das Attribut „border-image“ verwenden, um einen Spitzenrand zu erzielen. Das Attribut „border-image“ kann Bilder zum Erstellen von Rändern verwenden, d. h. zum Hinzufügen eines Hintergrundbilds zum Rand. Sie müssen lediglich das Hintergrundbild als Spitzenstil angeben Bildrandbreite nach innen. Ob der Anfang wiederholt wird;".

Es zeigt sich, dass Textkarussell und Bildkarussell auch mit reinem CSS realisierbar sind! Jun 10, 2022 pm 01:00 PM
Wie erstelle ich ein Textkarussell und ein Bildkarussell? Das erste, woran jeder denkt, ist die Verwendung von js. Tatsächlich können Textkarussell und Bildkarussell auch einen Blick auf die Implementierungsmethode werfen.

So vergrößern Sie das Bild durch Klicken mit der Maus in CSS3 Apr 25, 2022 pm 04:52 PM
Implementierungsmethode: 1. Verwenden Sie den Selektor „:active“, um den Status des Mausklicks auf das Bild auszuwählen. 2. Verwenden Sie das Transformationsattribut und die Funktion „scale()“, um den Bildvergrößerungseffekt zu erzielen. Die Syntax „img:active {transform : Skala(x-Achsen-Vergrößerung, y-Achsen-Vergrößerung);}".

So legen Sie die Rotationsgeschwindigkeit der Animation in CSS3 fest Apr 28, 2022 pm 04:32 PM
In CSS3 können Sie das Attribut „animation-timing-function“ verwenden, um die Rotationsgeschwindigkeit der Animation festzulegen. Dieses Attribut wird verwendet, um anzugeben, wie die Animation einen Zyklus abschließt und die Geschwindigkeitskurve der Animation festlegt. Animation-Timing-Funktion: Geschwindigkeitsattributwert;}".

Hat der CSS3-Animationseffekt eine Verformung? Apr 28, 2022 pm 02:20 PM
Der Animationseffekt in CSS3 verfügt über eine Verformung. Sie können „Animation: Animationsattribut @keyframes ..{..{transform: Transformationsattribut}}“ verwenden, um den Animationsstil festzulegen Das Transformationsattribut wird zum Festlegen des Verformungsstils verwendet.

See all articles