本教程详细讲解了如何为图片元素（``）添加css `:focus` 样式。默认情况下，图片不具备焦点功能，因此直接应用`:focus`伪类无效。核心解决方案是利用`tabindex`属性，使其可被键盘导航和聚焦，从而成功应用自定义的焦点样式，提升用户交互体验和无障碍性。
理解CSS :focus 伪类
CSS中的:focus伪类用于选择当前获得焦点的元素。当用户通过键盘（如Tab键）或鼠标点击使某个元素成为活动元素时，该元素就获得了焦点。这在创建交互式和无障碍的用户界面时非常重要，常用于表单输入框、按钮和链接等元素，以提供视觉反馈。
例如，为输入框添加焦点样式：
input:focus {
border: 2px solid blue;
outline: none; /* 移除浏览器默认的焦点轮廓 */
}图片元素与焦点行为的默认限制
在HTML中，并非所有元素都天然具备获得焦点的能力。通常，只有交互式元素（如<button>, <a>, <input>, <textarea>, <select>) 才能默认获得焦点。图片元素（<img>）在标准HTML中被视为非交互式内容，因此它们默认不参与键盘导航顺序，也无法通过点击直接获得焦点。
考虑以下代码示例，尝试为图片添加点击后的焦点样式：
立即学习“前端免费学习笔记（深入）”；
<style>
#img1 {
width: 300px;
transition: border 0.2s ease-in-out; /* 添加过渡效果 */
}
#img1:focus {
border: 2px solid green;
}
</style>
<img id="img1" src="test.jpg" alt="测试图片"/>尽管CSS规则 #img1:focus {border: 2px solid green;} 已经定义，但当用户点击或尝试通过Tab键导航到这张图片时，绿色的边框并不会出现。这是因为<img>元素没有获得焦点的能力。
解决方案：使用 tabindex 属性
要使一个非交互式元素（如<img>）能够获得焦点，我们需要借助HTML的全局属性 tabindex。tabindex 属性允许我们将任何HTML元素添加到 Tab 键的导航序列中，并使其能够接收焦点。
tabindex 属性的值及其含义：
-
tabindex="0":
- 使元素可获得焦点。
- 将元素添加到文档的默认 Tab 键导航顺序中。这意味着用户可以通过按 Tab 键按其在文档中的顺序导航到该元素。
- 当元素被聚焦时，可以应用 :focus 样式。
-
tabindex="-1":
- 使元素可获得焦点。
- 将元素从 Tab 键导航顺序中移除。这意味着用户不能通过按 Tab 键导航到该元素。
- 但可以通过 JavaScript 程序化地设置焦点（例如，element.focus()）。
- 当元素被聚焦时，可以应用 :focus 样式。
-
tabindex="正整数 (例如 1, 2, ...)":
- 使元素可获得焦点。
- 将元素添加到自定义的 Tab 键导航顺序中。数字越小，越早获得焦点。
- 注意事项： 这种用法通常不推荐，因为它会覆盖文档的自然 Tab 顺序，可能导致用户体验混乱和无障碍性问题。除非有非常明确和复杂的理由，否则应避免使用大于0的tabindex值。
为图片添加焦点样式的正确方法
为了使图片能够获得焦点并应用:focus样式，我们只需为其添加 tabindex="0" 属性：
<style>
#img1 {
width: 300px;
transition: border 0.2s ease-in-out; /* 添加过渡效果，使焦点变化更平滑 */
}
#img1:focus {
border: 2px solid green;
outline: 2px solid green; /* 也可以使用outline来避免影响布局 */
box-shadow: 0 0 5px rgba(0, 128, 0, 0.5); /* 添加阴影效果 */
}
</style>
<img id="img1" src="test.jpg" alt="测试图片" tabindex="0" />现在，当您点击这张图片或通过Tab键导航到它时，它将成功获得焦点，并显示2像素宽的绿色边框。
注意事项与最佳实践
-
无障碍性（Accessibility）考量：
- 为图片添加 tabindex="0" 意味着它现在是一个可交互元素。如果图片本身不具备交互功能（例如，它只是一个装饰性图片），那么将其设为可聚焦可能会让依赖键盘导航的用户感到困惑。
- 如果图片是交互式的（例如，点击图片会触发某个操作，如放大图片或跳转链接），那么使用 tabindex="0" 是合理的。在这种情况下，请确保同时提供清晰的视觉焦点指示（如本例中的绿色边框），并考虑添加适当的ARIA属性来增强语义（例如 role="button" 或 aria-label）。
- 如果图片仅仅是装饰性的，不应被聚焦，则不应添加 tabindex。
alt 属性的重要性： 即使图片是可聚焦的，alt 属性仍然至关重要，它为屏幕阅读器和其他辅助技术提供图片内容的文本描述。
避免默认 outline： 浏览器通常会为获得焦点的元素添加默认的蓝色或黑色轮廓（outline）。在自定义:focus样式时，为了保持视觉一致性，通常会使用 outline: none; 来移除默认轮廓，然后通过 border 或 box-shadow 等属性来自定义焦点指示。
-
替代方案： 如果您希望图片在点击时有视觉反馈，但又不希望它真正获得焦点或参与 Tab 导航，可以考虑将图片包裹在一个 <div> 或 <button> 元素中，然后为包裹元素添加点击事件和焦点样式。
- 如果图片是可点击的按钮：
<button style="border: none; background: none; padding: 0;" tabindex="0"> <img src="test.jpg" alt="点击放大图片" style="width: 300px;"/> </button>- 如果图片只是需要点击反馈：
<div style="display: inline-block;" tabindex="0"> <img src="test.jpg" alt="展示图片" style="width: 300px;"/> </div>在这种情况下，div 获得焦点，img 不会。
总结
为图片元素（<img>）添加CSS :focus 样式需要理解其默认的非聚焦行为。通过简单地在<img>标签上添加 tabindex="0" 属性，我们可以使其变为可聚焦元素，从而能够响应:focus伪类定义的样式。在实施此功能时，务必考虑无障碍性，确保为用户提供清晰、一致的交互体验。正确使用tabindex属性，可以有效扩展CSS :focus 的应用范围，提升网页的可用性和无障碍性。
