:focus 作用于当前获得焦点的元素本身，:focus-within 则作用于包含聚焦子元素的父元素。1. :focus 用于直接设置被聚焦元素的样式，如输入框或按钮的高亮效果；2. :focus-within 使父容器能响应子元素的聚焦状态，适用于表单组或下拉菜单的整体样式变化；3. 使用时需注意合理范围与嵌套层级，避免样式混乱；4. 现代浏览器支持良好，但旧版 ie 需要 js 模拟；5. 无论使用哪个伪类，都应确保键盘用户的聚焦状态清晰可见，保障无障碍访问。
在网页交互中，焦点控制是很重要的一环。CSS 提供了 :focus 和 :focus-within 这两个伪类选择器，帮助开发者更好地控制元素获得焦点时的样式表现。它们虽然名字相似，但用途和行为有明显区别，搞混的话容易写出不符合预期的样式。
:focus：只作用于当前获得焦点的元素
:focus 是最常用的焦点伪类之一，它匹配的是当前正被聚焦的元素本身。例如点击输入框或通过 Tab 键导航到某个按钮时，该元素就会处于 :focus 状态。
常见用法包括：
立即学习“前端免费学习笔记（深入）”；
- 给
<input>、<button>或可聚焦的元素添加高亮边框或背景色 - 移除默认的 outline 框（有时为了美观会这么做，但要注意保留无障碍访问）
input:focus {
border-color: blue;
outline: none;
}⚠️ 注意：使用 outline: none 时，建议提供替代的视觉反馈，否则键盘用户可能会找不到当前聚焦的位置。
:focus-within：作用于包含聚焦子元素的父级
:focus-within 的不同之处在于，它匹配的是包含正在聚焦子元素的父元素。也就是说，只要这个父元素内部有一个子元素获得了焦点，那么整个父元素都会应用对应的样式。
这在制作如表单组、下拉菜单等组件时非常有用。
举个例子：
<div class="form-group"> <label for="name">姓名</label> <input type="text" id="name" /> </div>
配合 CSS：
.form-group:focus-within {
background-color: #f0f8ff;
}当用户点击输入框时，.form-group 会整体变色，这对用户体验是一个不错的增强。
使用建议与注意事项
-
合理使用范围：不要滥用
:focus-within，特别是在嵌套层级较深的情况下，可能会导致多个父级同时触发样式变化，造成混乱。 -
兼容性方面：
:focus-within在现代浏览器中支持良好（Chrome、Firefox、Safari 都支持），但在一些旧版本 IE 中不可用。如果需要兼容 IE，可能需要用 JS 来模拟实现。 - 无障碍设计：无论使用哪个伪类，都要确保聚焦状态清晰可见，特别是对键盘操作用户来说非常重要。
总结一下
:focus 用于聚焦自身时的样式控制，:focus-within 则让父容器也能感知子元素的聚焦状态。两者各有适用场景，理解清楚它们的行为差异，可以让你在构建交互式界面时更加得心应手。
基本上就这些。
