CSS: 포커스 의사 클래스 사용
- 一个新手원래의
- 2017-10-20 09:15:262214검색
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"键，遍历所有的可获得焦点的元素，使其获得焦点；
위 내용은 CSS: 포커스 의사 클래스 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.