极客教程:focus 和 :active 选择器的区别
:focus 选择器：它通常适用于表单元素或可以使用键盘或鼠标聚焦的元素，如输入框、文本区域。当对特定元素使用键盘的 tab 键时，元素处于焦点状态。在用户将选项卡切换到另一个元素或单击之前，焦点状态将相同。
语法：
:focus {
// CSS Property
}
示例： 此示例说明了 :focus 选择器用法 –
<!DOCTYPE html>
<html>
<head>
<title>Focus pseudo class</title>
<style>
div.one{
margin-left:40%;
margin-top: 10%;
}
h1{
color: green;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 2px;
}
button{
font-size: x-large;
padding: 10px;
border: 2px solid black;
}
button:focus{
color: green;
background-color: white;
font-style: italic;
}
</style>
</head>
<body>
<div class="one">
<h1>GeekDocs GeekDocs</h1>
<button type="submit">
Focus or Click here
</button>
</div>
</body>
</html>
说明：在上面的示例中，使用以下 CSS 属性来设置 :focus 选择器。
button:focus {
color: green;
background-color: white;
font-style: italic;
}
这些 CSS 属性用于设置按钮的样式。
- 文本的颜色将变为绿色。
- 按钮的背景颜色将更改为白色。
- 字体样式将从正常更改为斜体。
active ：它通常适用于按钮和锚标签。当用户点击鼠标时触发。在用户按住鼠标之前，活动状态将是相同的。
语法：
:active {
// CSS property
}
示例：此示例说明了 :active 选择器用法。
<!DOCTYPE html>
<html>
<head>
<title>
:active pseudo class
</title>
<style>
div.one {
margin-left:40%;
margin-top: 10%;
}
h1 {
color: green;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 2px;
}
button {
font-size: x-large;
padding: 10px;
border: 2px solid black;
}
button:active {
color:white;
background-color: green;
font-family: 'Courier New', Courier, monospace
}
</style>
</head>
<body>
<div class="one">
<h1>GeekDocs GeekDocs</h1>
<button type="submit">
Focus or Click here
</button>
</div>
</body>
</html>
说明：在上面的示例中，使用以下 CSS 属性来设置 :active 选择器。
button:active {
background-color: green;
font-family: 'Courier New', Courier, monospace
}
通过这些代码行，改变了焦点按钮的样式 –
- 按钮的背景颜色将更改为绿色。
- 字体系列将被更改。