Home >Web Front-end >CSS Tutorial >Detailed explanation of usage examples of focus pseudo-class in CSS
Detailed explanation of usage examples of focus pseudo-class in CSS
- 黄舟Original
- 2017-10-20 11:07:281896browse
Detailed explanation of usage examples of focus pseudo-class in CSS;
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 uses:focus to set the style of the input box when it gets focus
Example 2
:focus is used for page navigation column, 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>
Supplement:
When the element gets the focus, if the element is a valid link, you can enter the link address by pressing the "Enter" key;
In the page, you can also use the "Tab" key to traverse all the elements that can get focus and make them focus;
The above is the detailed content of Detailed explanation of usage examples of focus pseudo-class in CSS. For more information, please follow other related articles on the PHP Chinese website!