Home > Article > Web Front-end > css: use of focus pseudo-class
css: use of focus pseudo-class
- 一个新手Original
- 2017-10-20 09:15:262151browse
In css: use of focus pseudo-class, that is, setting styles for elements that have received focus
Example 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>The above is passed: focus to The input input box has set the style when it gets focus
Example 2
: 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!