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