Detaillierte Erläuterung der Verwendungsbeispiele der Fokus-Pseudoklasse in CSS
In CSS: Verwendung der Fokus-Pseudoklasse, d. h. Festlegen von Stilen für Elemente, die den Fokus erhalten haben
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>:focus</title>
<style>
*{
margin: 0;
padding: 0;
}
input:focus{
background: #cbcbcb;
}
</style></head><body>
<input type="text"/></body></html>Das Obige verwendet: focus, um den Stil des Eingabefelds festzulegen, wenn es den Fokus erhält
: Der Fokus wird auf der Seite verwendet. Bei Verwendung der Navigationsleiste lautet das Codebeispiel wie folgt:
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>:focus</title>
<style>
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
float: left;
margin: 0 20px;
}
ul li a{
text-decoration: none;
}
ul li a:focus{
color: #ff290a;
}
</style></head><body>
<ul>
<li><a href="javascript:;">博客园</a></li>
<li><a href="javascript:;">首页</a></li>
<li><a href="javascript:;">联系</a></li>
<li><a href="javascript:;">管理</a></li>
</ul></body></html>
Ergänzung:
Wenn das Element den Fokus erhält und es sich bei dem Element um einen gültigen Link handelt, können Sie die Linkadresse eingeben, indem Sie auf drücken „Enter“-Taste;
Sie können auch die „Tab“-Taste auf der Seite verwenden, um alle fokussierbaren Elemente zu durchlaufen
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Anwendungsbeispielen der Fokus-Pseudoklasse in CSS. 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)
