如何通过CSS实现HTML中a元素聚焦时修改字体大小？

嘿，我来帮你搞定这个问题！当你聚焦<a>链接时字体没变化，大概率是CSS优先级不足或者没正确使用:focus伪类。下面是具体的实现方案，亲测有效：

完整实现代码 #

HTML 部分 #

<!-- 简单的示例链接 -->
<a href="#section1">跳转到章节1</a>
<a href="https://example.com" class="custom-link">外部链接</a>

CSS 部分 #

/* 先设置链接的基础样式 */
a {
  font-size: 16px;
  color: #333;
  text-decoration: none;
  /* 可选：添加过渡动画，让字体大小变化更平滑自然 */
  transition: font-size 0.2s ease-in-out;
}

/* 核心：聚焦时的样式 */
a:focus {
  font-size: 20px;
  /* 可选：自定义聚焦轮廓，增强可访问性（避免去掉默认outline后用户看不到焦点） */
  outline: 2px solid #4285F4;
  outline-offset: 2px;
}

/* 如果需要给特定链接设置不同的聚焦效果，用类选择器提高优先级 */
.custom-link:focus {
  font-size: 22px;
  color: #4285F4;
}

关键要点说明 #

1. 正确使用:focus伪类：这个伪类会在元素获得焦点时触发（比如用Tab键切换到链接、点击链接），直接在这里设置font-size就能生效。
2. 优先级问题：如果你的CSS中有其他更具体的选择器（比如带类名、ID的选择器）覆盖了a:focus的样式，你需要提高当前选择器的优先级——比如给链接加类名，用.custom-link:focus来设置样式，或者在必要时使用!important（尽量少用，优先通过选择器优先级解决）。
3. 可访问性提示：不要随便去掉默认的outline，如果要自定义，一定要替换成清晰的聚焦指示，确保键盘导航的用户能看到当前焦点位置。

内容的提问来源于stack exchange，提问作者Tahridabbas