Heim > Artikel > Web-Frontend > Verwenden Sie CSS-Pseudoklassen

Verwenden Sie CSS-Pseudoklassen

王林nach vorne: 2023-09-03 18:41:011238Durchsuche

Wir können mithilfe von CSS-Pseudoklassen bestimmte Stile zu vorhandenen Elementen in HTML hinzufügen. Diese Pseudoklassen wählen Elemente mit bestimmten Zuständen aus, z. B. (Hover, Zugriff, Deaktiviert usw.).

HINWEIS strong> – Um CSS-Pseudoklassen zu kombinieren -Klassen mit Pseudoelementen werden in CSS3 durch einen Doppelpunkt getrennt.

Syntax

Hier ist die Syntax für die Verwendung von CSS-Pseudoklassen für ein Element –

Selector:pseudo-class {
   css-property: /*value*/;
}

Hier sind alle verfügbaren CSS-Pseudoklassen –

Deaktiviert leer10111213Es wählt das n-te Kind als übergeordnetes Element jedes genannten Elements aus Das untergeordnete Element beginnt zu zählen Es wählt jedes erwähnte Element aus, d. h. das n-te erwähnte Element in seinem übergeordneten Element, beginnend mit dem letzten untergeordneten Element. Die Elemente beginnen zu zählen tr>

Sr.No	Pseudoklasse und Beschreibung
1	Aktivitäten Es wählt Elemente aus, die von Aktivitäten erwähnt werden 3
	Es wählt jedes deaktivierte erwähnte Element aus. 4
Es wählt jedes erwähnte Element aus, das keine untergeordneten Elemente hat Es wählt jedes erwähnte Element aus ist aktiviert Es Wählt jedes zuerst erwähnte Element seines übergeordneten Elements aus Wählt Erwähnungen beim Mouseover aus td>
	Im BereichEs wählt Erwähnungen von Werten innerhalb des angegebenen Bereichs aus. Element
	UngültigEs wählt alle genannten aus Elemente mit ungültigem Wert
	lang (Sprache) Es wählt jede Erwähnung eines Elements aus, dessen lang-Attributwert mit „Sprache“ beginnt
	last-child es wählt als letztes untergeordnetes Element seines übergeordneten Elements aus Es wählt alle nicht besuchten erwähnten Elemente aus.
	19 nth-last -oftype(n)
td>	20 Es wählt jedes erwähnte Element als einzige Erwähnung seines übergeordneten Elements aus optional Es wählt das obige Element ohne „erforderliches“ Attribut aus
	24außerhalb des Bereichs Es wählt die genannten Elemente mit Werten außerhalb des angegebenen Bereichs aus
	25 schreibgeschützt Es wählt die erwähnten Elemente mit dem angegebenen Attribut „schreibgeschützt“ aus
	26 Lese-/Schreibzugriff Es wählt die genannten Elemente ohne das Attribut „schreibgeschützt“ aus
27	erforderlich Es wählt die genannten Elemente aus, für die das Attribut „erforderlich“ angegeben ist das Dokument
29	Ziel Es wählt das aktuell erwähnte aktive Element aus (klicken Sie auf die URL, die diesen Ankernamen enthält)
30	有效它选择具有有效值的所有提到的元素
31	访问过它选择所有访问过的提到的元素

示例

让我们看一个 CSS 伪类的示例 -

现场演示

<!DOCTYPE html>
<html>
<head>
<title>CSS Anchor Pseudo Classes</title>
</head>
<style>
div {
   color: #000;
   padding:20px;
   background-image: linear-gradient(135deg, grey 0%, white 100%);
   text-align: center;
}
.anchor {
   color: #FF8A00;
}
.anchor:last-child {
   color: #03A9F4;
}
.anchor:visited {
   color: #FEDC11;
}
.anchor:hover {
   color: #C303C3;
}
.anchor:active {
   color: #4CAF50;
}
</style>
<body>
<div>
<h1>Search Engines</h1>
<a class="anchor" href="https://www.google.com" target="_blank">Go To Google</a>
<a class="anchor" href="https://www.bing.com" target="_blank">Go To Bing</a>
</div>
</body>
</html>

输出

这将产生以下输出 -

使用 CSS 伪类

示例

让我们看一下 CSS 伪类的另一个示例 -

现场演示

<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Classes</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
   box-sizing: border-box;
}
.child{
   display: inline-block;
   height: 40px;
   width: 40px;
   color: white;
   border: 4px solid black;
}
.child:nth-of-type(1){
   background-color: #FF8A00;
}
.child:nth-of-type(2){
   background-color: #F44336;
}
.child:nth-of-type(3){
   background-color: #C303C3;
}
.child:nth-of-type(4){
   background-color: #4CAF50;
}
.child:nth-of-type(5){
   background-color: #03A9F4;
}
.child:nth-of-type(6){
   background-color: #FEDC11;
}
.child:hover{
   background-color: #000;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Pseudo-Classes</legend>
<div id="container">
<div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div>
</div><br>
</body>
</html>

输出

这将产生以下输出 -

当未将鼠标悬停在 div 元素上时 -

Verwenden Sie CSS-Pseudoklassen

当鼠标悬停在 div 元素上时 -

Verwenden Sie CSS-Pseudoklassen

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

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Fügen Sie dem Bild mit CSS3 Schatten hinzuNächster Artikel：Fügen Sie dem Bild mit CSS3 Schatten hinzu

In Verbindung stehende Artikel

Mehr sehen