CSS 选择器 :focus

:focus 选择器用于选取获得焦点的元素。这个选择器通常应用于表单控件，比如文本输入框、按钮等，当它们被用户选中或激活时，可以通过这个选择器来改变其样式。

基础用法

:focus 选择器允许我们针对特定元素定义在用户与之交互时的视觉效果。这在创建更易用和更具吸引力的用户界面时非常有用。

示例

假设我们有一个简单的文本输入框，我们希望当它获得焦点时，它的边框颜色变为蓝色：

input:focus {
    border-color: blue;
}

在这个例子中，当用户点击输入框或者通过 Tab 键导航到输入框并使其获得焦点时，输入框的边框颜色将变为蓝色。

与其他选择器结合使用

:focus 选择器可以与其他选择器一起使用，以实现更复杂的效果。

示例：结合类选择器

如果我们想在特定类型的输入框获得焦点时改变其背景颜色，可以这样做：

.input--special:focus {
    background-color: yellow;
}

这里，.input--special 是一个自定义的类名，用于标识特定的输入框。当这样的输入框获得焦点时，它的背景颜色会变成黄色。

处理焦点事件

有时，我们可能希望在元素失去焦点后恢复其原始样式。可以使用 :focus-within 和 :focus-visible 等伪类来进一步控制焦点状态。

示例：处理焦点丢失

如果我们在用户离开输入框后想恢复其默认边框颜色，可以这样做：

input:focus {
    border-color: blue;
}

input:not(:focus) {
    border-color: gray;
}

这样，在输入框未获得焦点时，它的边框颜色将是灰色，而一旦获得焦点，则变为蓝色。

兼容性问题

需要注意的是，并非所有浏览器都完全支持 :focus 相关的选择器。在开发过程中，应该检查目标浏览器的兼容性，确保应用的样式能在不同环境下正常工作。

示例：检查浏览器兼容性

对于一些较老的浏览器版本，可能需要提供额外的 JavaScript 支持来模拟 :focus 的行为。例如，使用 Modernizr 库可以帮助检测浏览器对某些 CSS 功能的支持情况。

实践技巧

• 使用 outline 属性代替 border 来保持可访问性。
• 考虑为所有可交互元素添加 :focus 样式，以提高网站的整体可用性。
• 尽量减少使用 :focus 选择器带来的视觉干扰，确保用户体验良好。

以上就是关于 CSS 选择器 :focus 的详细介绍。通过合理利用 :focus，我们可以极大地提升用户界面的互动性和美观度。