CSS의 포커스 의사 클래스 사용 예에 대한 자세한 설명
- 黄舟원래의
- 2017-10-20 11:07:281808검색
CSS의 포커스 의사 클래스 사용 예에 대한 자세한 설명
Css: 포커스 의사 클래스의 사용, 즉 포커스를 받은 요소에 대한 스타일 설정
예제 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>위는 다음과 같습니다. 전달 : 입력 입력 상자에 포커스 포커스를 얻었을 때 스타일 설정
예제 2
: 페이지 내비게이션 바에 포커스를 사용한 경우 코드 예는 다음과 같습니다.
<!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으로 문의하세요.
이전 기사：CSS3 애니메이션에서 원형 운동 궤적 구현다음 기사：CSS3 애니메이션에서 원형 운동 궤적 구현