Heim >Web-Frontend >CSS-Tutorial >Verwenden Sie CSS-Pseudoklassen
Verwenden Sie CSS-Pseudoklassen
- 王林nach vorne
- 2023-09-03 18:41:011267Durchsuche
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 –
| 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 |
|
| 13 |
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 |
访问过 它选择所有访问过的提到的元素 | tr>
示例
让我们看一个 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 伪类的另一个示例 -
现场演示
<!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 元素上时 -
当鼠标悬停在 div 元素上时 -
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!