CSS의 포커스 의사 클래스 사용 예에 대한 자세한 설명
Css: 포커스 의사 클래스의 사용, 즉 포커스를 받은 요소에 대한 스타일 설정
<!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>위는 다음과 같습니다. 전달 : 입력 입력 상자에 포커스 포커스를 얻었을 때 스타일 설정
: 페이지 내비게이션 바에 포커스를 사용한 경우 코드 예는 다음과 같습니다.
<!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
