Rumah > Artikel > hujung hadapan web > css：focus伪类的使用
css：focus伪类的使用
- 一个新手asal
- 2017-10-20 09:15:262155semak imbas
css中：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>以上通过：focus给input输入框进行了得到焦点时的样式的设置
示例二
：focus使用于页面的导航栏时，代码示例如下：
<!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>补充：
当元素获取到焦点之后，若该元素是一个有效的链接，则通过“Enter”键即可进入该链接地址；
在页面中也可以通过"Tab"键，遍历所有的可获得焦点的元素，使其获得焦点；
Atas ialah kandungan terperinci css：focus伪类的使用 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：img的属性alt 与 title的有什么区别 Artikel seterusnya：老手总结10个妨碍进步的学习方式