css button 的四种状态 focus 伪类
Posted ISaiSai
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css button 的四种状态 focus 伪类相关的知识，希望对你有一定的参考价值。
1.普通状态2，鼠标hover状态 3.active 点击状态 4.focus 取得焦点状态
focus 经常用来取消a链接点击后产生的虚线边框
a:focus
outline: none;
<!DOCTYPE html>
<html><head>
<title></title>
<meta charset="gbk">
<style type="text/css">
.btn
color: white;
background-color: #008aa6;
padding: 0px 1em;
height: 22px;
margin-left: 10px;
border: 0px solid black;
border-radius: 5px;
.btn:hover
background-color: #ff0000;
/*active 要在后面 否则会被hover覆盖*/
.btn:focus
background-color: #00ff00;
.btn:active
background-color: #000000;
</style>
</head>
<body>
<button class="btn">hehhe</button>
</body>
</html>
以上是关于css button 的四种状态 focus 伪类的主要内容，如果未能解决你的问题，请参考以下文章