Heim >Web-Frontend >CSS-Tutorial >CSS: Verwendung der Fokus-Pseudoklasse
CSS: Verwendung der Fokus-Pseudoklasse
- 一个新手Original
- 2017-10-20 09:15:262215Durchsuche
In CSS: Verwendung der Fokus-Pseudoklasse, d. h. Festlegen von Stilen für Elemente, die den Fokus erhalten haben
Beispiel 1
<!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 wird übergeben: Der Fokus legt den Stil des Eingabefelds fest, wenn es den Fokus erhält.
Beispiel 2
: Wenn der Fokus in der Navigationsleiste der Seite verwendet wird, sieht das Codebeispiel wie folgt aus 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 durch Drücken der „Enter“-Taste eingeben; Sie können auch die „Tab“-Taste auf der Seite drücken und alle fokussierbaren Elemente durchlaufen, um den Fokus zu erhalten
Das obige ist der detaillierte Inhalt vonCSS: Verwendung der Fokus-Pseudoklasse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!