In css: use of focus pseudo-class, that is, setting styles for elements that have received focus
<!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>The above is passed: focus to The input input box has set the style when it gets focus
: When focus is used in the navigation bar of the page, the code example is as follows:
<!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>Addition:
When the element gets the focus, if the element is a If there is a valid link, you can enter the link address by pressing the "Enter" key;
You can also press the "Tab" key in the page to traverse all available The element that gets focus makes it focus;
The above is the detailed content of css: use of focus pseudo-class. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
