最常用且简洁的方式是用:focus伪类控制提示元素显隐；提示元素需紧邻或包裹输入框，同级用+选择器、父容器用:focus-within实现。
输入框聚焦后显示辅助提示，最常用且简洁的方式就是用 :focus 伪类控制提示元素的显隐。关键是把提示内容（比如 <span></span> 或 <div>）放在输入框附近，并默认隐藏，再通过 css 在输入框获得焦点时将其显示出来。<h3>结构要合理：提示元素紧邻或包裹输入框</h3> <p>html 结构推荐两种写法，便于 CSS 精准控制：</p> <ul> <li> <strong>同级相邻</strong>：提示元素紧跟在 <code><input> 后面，用 + 或 ~ 选择器匹配
<input> 和提示元素放进同一个 <div class="input-group">，用 <code>:focus-within 或子选择器更灵活基础 CSS 实现（同级 + 选择器）
假设 HTML 是这样：
请输入用户名，至少3位
对应 CSS 可以写：
立即学习“前端免费学习笔记（深入）”；
#username:focus + .hint {
display: block;
}
.hint {
display: none; /* 默认隐藏 */
font-size: 12px;
color: #666;
margin-top: 4px;
}
更健壮的做法：用 :focus-within（推荐）
如果结构是包裹式，语义和兼容性更好：
请使用常用邮箱，用于找回密码
CSS：
.input-wrapper .hint { display: none; }
.input-wrapper:focus-within .hint { display: block; }
✅ 优点：支持鼠标点击、键盘 Tab 进入都触发；不依赖严格相邻顺序；适合带 label 或图标的复杂输入组。
增强体验的小细节
- 加个淡入过渡：
opacity: 0; transition: opacity 0.2s;，再在聚焦时设opacity: 1; - 避免布局跳动：给提示元素预留空间（如用
min-height或visibility: hidden替代display: none） - 可结合
:invalid或 JavaScript 动态增删 class，实现「失焦校验后提示」等进阶逻辑
基本上就这些。核心就两点：结构上让提示可被 CSS 定位到，样式上用 :focus 或 :focus-within 控制显隐。不复杂但容易忽略结构合理性。