CSS中的focus选择器属于伪类选择器的一种，它专门用来选中当前处于焦点状态的元素。当用户通过鼠标点击、键盘Tab键切换或者其他方式激活某个元素时，该元素就会获得焦点，此时使用focus选择器定义的样式便会立即生效。focus选择器在提升页面交互体验方面扮演着重要角色，它能够让用户清楚地知道当前正在操作哪一个元素，从而避免误操作。
focus选择器的核心作用与工作原理
focus选择器的核心作用是为获得焦点的元素添加专属样式，让用户能够直观地感知当前正在操作的元素位置。在网页中，焦点是一个非常重要的概念，它表示用户当前与页面交互的入口。当一个元素获得焦点时，键盘输入、回车确认等操作都会直接作用于该元素。如果没有清晰的焦点提示，用户在使用键盘导航或填写表单时很容易迷失方向。
focus选择器的工作原理与浏览器的焦点管理机制密切相关。浏览器会维护一个当前焦点元素的状态，当用户通过点击、Tab键切换或脚本调用focus()方法时，焦点会从一个元素转移到另一个元素。CSS的focus伪类就是基于这个状态来匹配元素的，它不需要额外的JavaScript代码，完全由浏览器自动处理。这种纯CSS的实现方式既简洁又高效，非常适合用于各类交互场景。
focus选择器适用的元素范围
并不是所有HTML元素都能触发focus状态，只有满足特定条件的元素才能使用focus选择器来设置样式。了解这些适用范围对于正确使用focus选择器至关重要。
- 本身是天然可聚焦的元素，比如
<input>、<textarea>、<select>、<button>、<a>标签，这些元素在默认情况下就可以通过鼠标点击或键盘操作获得焦点。 - 设置了
tabindex属性的普通元素，比如<div>、<span>等，只要添加了tabindex属性，它们就可以被聚焦，从而使用focus选择器设置样式。
对于没有设置tabindex属性的普通元素，即使页面中显示了它们，也无法通过焦点事件来应用focus样式。因此如果需要让某个非交互元素支持焦点状态，一定要记得给它添加tabindex属性。
focus选择器的典型应用场景
1. 表单输入框焦点样式
这是focus选择器最常见的使用场景。当用户点击输入框准备输入内容时，给输入框添加边框高亮、阴影等样式，可以清晰地提示用户当前正在操作该输入框。良好的焦点样式能显著提升表单填写的体验，尤其是在包含多个输入框的页面中。
/* 输入框默认样式 */
input[type="text"] {
width: 240px;
height: 36px;
border: 1px solid #cccccc;
border-radius: 4px;
padding: 0 12px;
outline: none; /* 去除浏览器默认的聚焦轮廓 */
transition: border-color 0.2s, box-shadow 0.2s;
}
/* 输入框获得焦点时的样式 */
input[type="text"]:focus {
border-color: #409eff;
box-shadow: 0 0 6px rgba(64, 158, 255, 0.55);
}
在上面的代码中，输入框默认使用浅灰色边框，当用户点击或通过Tab键切换到该输入框时，边框颜色变为蓝色，同时出现柔和的蓝色阴影。这种视觉反馈让用户一眼就能确认当前正在操作的输入框位置，有效降低了填写出错的可能性。
2. 按钮焦点样式
按钮在获得焦点时同样可以设置样式，比如改变背景色、添加边框等。这样当用户使用键盘Tab键切换到某个按钮时，就能清楚地知道当前可以通过回车键触发该按钮的点击事件。按钮焦点样式对于键盘操作用户来说尤其重要。
/* 按钮默认样式 */
.btn {
padding: 10px 20px;
background-color: #f5f5f5;
border: 1px solid #dddddd;
border-radius: 4px;
cursor: pointer;
outline: none;
}
/* 按钮获得焦点时的样式 */
.btn:focus {
background-color: #e8e8e8;
border-color: #409eff;
box-shadow: 0 0 4px rgba(64, 158, 255, 0.4);
}
按钮的focus样式不仅提供了视觉上的反馈，还增强了可访问性。许多用户习惯使用键盘浏览页面，当他们通过Tab键依次切换按钮时，清晰的焦点状态能够让他们了解当前的选择位置，从而避免误触。
3. 自定义可聚焦元素样式
给普通元素添加tabindex属性后，也可以使用focus选择器设置样式。比如自定义的下拉菜单触发区域、卡片选择组件等，都可以通过这种方式实现焦点高亮效果。
<div class="custom-focus" tabindex="0">点击或按Tab键聚焦我</div>
.custom-focus {
width: 220px;
padding: 12px;
border: 1px solid #cccccc;
border-radius: 4px;
cursor: pointer;
outline: none;
}
.custom-focus:focus {
border-color: #ff6700;
background-color: #fff8f0;
box-shadow: 0 0 5px rgba(255, 103, 0, 0.35);
}
通过给<div>元素设置tabindex="0"属性，这个普通元素就具备了可聚焦能力。当用户点击它或者通过Tab键切换到它时，focus样式就会生效，边框变为橙色，背景色也产生了暖色变化。这种技术常用于构建自定义的交互组件，让非表单元素也能拥有良好的键盘操作体验。
使用focus选择器时的注意事项
在实际开发中使用focus选择器时，有一些细节需要特别留意，否则可能会出现样式异常或者可访问性问题。
- 不要忘记去除浏览器默认的
outline样式后再自定义focus样式，否则可能会出现样式冲突。不过要注意，不能为了美观直接全局去除outline，这样会影响键盘导航用户的体验。推荐的做法是在具体元素上定义自己的焦点样式来替代默认的轮廓线。 - focus选择器的样式优先级高于元素默认样式，但是低于内联样式和带
!important标记的样式。在调试焦点样式时，如果发现样式没有生效，可以检查是否存在优先级更高或者其他选择器覆盖的情况。 - 如果元素设置了
display: none或者visibility: hidden，即使添加了tabindex属性也无法获得焦点，focus样式自然也不会生效。这是因为隐藏元素不参与页面焦点导航。 - 移动端触摸操作时，部分浏览器可能不会触发focus状态，需要结合
touch相关事件做兼容处理。例如在移动端可以额外使用:active伪类或者通过JavaScript的touchstart事件来补充交互反馈。
focus与focus-within的区别
很多开发者会混淆focus和focus-within这两个选择器。两者的核心区别在于：focus只匹配自身获得焦点的元素，而focus-within会匹配自身或者后代元素获得焦点的元素。这个区别意味着focus-within可以用来给包含焦点元素的父级容器添加样式，而focus则做不到这一点。
用一个具体的例子来说明：假设有一个表单容器，里面包含多个输入框。当用户点击其中某个输入框时，该输入框自身获得焦点，此时focus选择器可以修改这个输入框的样式，但它无法直接影响外层表单容器的样式。而focus-within选择器可以匹配这个表单容器，因为它的后代元素获得了焦点，从而给整个容器添加边框或者背景变化。
/* 当表单内任意输入框获得焦点时，整个表单容器添加边框 */
form:focus-within {
border: 1px solid #409eff;
padding: 10px;
border-radius: 4px;
box-shadow: 0 0 8px rgba(64, 158, 255, 0.25);
}
focus-within在实际开发中非常实用，尤其是需要突出显示当前正在操作的表单区域时。比如一个页面上有多个独立的表单区块，使用focus-within可以让用户聚焦于正在操作的区块，弱化其他未操作区块的视觉干扰，从而提升整体交互体验。
总体来说，focus选择器是CSS交互设计中不可或缺的基础工具。从表单输入框的高亮边框，到按钮的焦点反馈，再到自定义组件的键盘导航支持，focus选择器为开发者提供了简洁而强大的焦点样式控制能力。在实际项目中，建议将focus样式设计纳入整体的视觉规范中，同时兼顾鼠标用户和键盘用户的操作习惯。通过合理使用focus选择器，并配合focus-within选择器处理容器级别的焦点反馈，可以让网页的可用性和可访问性都得到显著提升。
cssfocus_selector伪类选择器表单交互修改时间：2026-07-20 20:03:27