简介

:focus 选择器用于选择当前获得焦点的元素。当元素获得焦点时，它可能正在接受用户输入，例如文本输入字段或按钮。

语法

:focus {
  /* 样式规则 */
}

用例

:focus 选择器有许多有用的用例，包括：

• **突出显示活动元素：**当元素获得焦点时，可以将其样式更改为使其在页面上脱颖而出。这有助于用户了解哪些元素当前处于活动状态。
• **改进可访问性：**对于使用屏幕阅读器或键盘导航网站的用户，:focus 选择器可以帮助他们识别当前正在交互的元素。
• 创建交互式效果：:focus 选择器可用于创建交互式效果，例如当用户将鼠标悬停在元素上时显示工具提示。

示例

以下是一些使用:focus 选择器的示例：

// www.javascriptcn.com code example
/* 突出显示获得焦点的输入字段 */
input:focus {
  background-color: #FFFF00;
}

/* 在获得焦点的按钮上显示边框 */
button:focus {
  border: 2px solid #0000FF;
}

/* 当获得焦点的元素被悬停时显示工具提示 */
*:focus:hover {
  position: relative;
  z-index: 999;
  background-color: #FF0000;
  padding: 5px;
  border: 1px solid #000000;
  color: #FFFFFF;
}

注意要点

使用:focus 选择器时，应注意以下几点：

• 浏览器支持：:focus 选择器得到所有现代浏览器的良好支持。
• 与其他伪类结合使用：:focus 选择器可以与其他伪类结合使用，例如:hover 和:active，以创建更复杂的样式规则。
• **可访问性：**确保:focus 样式不会以任何方式损害网站的可访问性。例如，避免使用会干扰屏幕阅读器或键盘导航的样式。

结论

:focus 选择器是一个强大的工具，可用于增强用户体验、提高可访问性并创建交互式效果。通过了解其语法、用例和注意事项，您可以有效地使用它来改善您的网站或应用程序。