:focus-within 可在表单容器内任意子元素获焦时触发样式变化，适用于高亮输入区域、显示隐藏按钮或提示信息，如 .form-group:focus-within 应用背景和阴影，.input-wrapper:focus-within 显示清除按钮，提升交互体验且无需 javaScript，现代浏览器支持良好，但需注意避免过度动画并考虑老版本浏览器兼容性。
当表单容器内的任意子元素获得焦点时，:focus-within 伪类就能触发样式变化。这个特性非常适合用于提升表单的交互体验，比如高亮整个输入区域、显示隐藏提示或调整布局。
基本用法
使用 :focus-within 可以选择一个父元素，只要其内部任何一个子元素处于聚焦状态，该父元素就会应用指定样式。
例如：
.form-group:focus-within { background-color: #f0f8ff; border-radius: 8px; box-shadow: 0 0 5px rgba(0, 123, 255, 0.3); }
只要 .form-group 内的 input、textarea 或其他可聚焦元素被点击或通过 Tab 键选中，整个容器都会获得上述样式。
实际应用场景
这个伪类在以下场景中特别有用：
立即学习“前端免费学习笔记（深入）”；
- 表单行高亮：用户在某个输入框输入时，突出显示当前行
- 动态显示按钮：聚焦输入框时自动显示“清除”按钮
- 辅助信息展开：获得焦点时显示帮助文本或格式提示
示例：聚焦时显示清除按钮
.input-wrapper { display: flex; align-items: center; } .clear-btn { display: none; } .input-wrapper:focus-within .clear-btn { display: block; }
这样，只有当输入框获得焦点时，清除按钮才会出现，界面更简洁。
兼容性与注意事项
:focus-within 在现代浏览器中支持良好（chrome 68+, firefox 52+, safari 12+），但不支持 IE。如需兼容老浏览器，可用 javascript 模拟实现。
避免过度使用动画或剧烈样式变化，以免干扰用户输入。建议配合 :focus-visible 等伪类做更精细的控制。
基本上就这些。合理使用 :focus-within 能让表单更直观易用，而且无需 js 就能实现动态交互效果。