Rumah >hujung hadapan web >tutorial css >CSS中关于focus伪类的使用实例详解
CSS中关于focus伪类的使用实例详解
- 黄舟asal
- 2017-10-20 11:07:281899semak imbas
CSS中关于focus伪类的使用实例详解；
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：css3动画中圆形运动轨迹的实现Artikel seterusnya：CSS属性实现一棵圣诞树的实例（图）