直接写 .btn:active 没反应是因为 Bootstrap 5.3 主动移除了该样式，且 btn-check + label.btn 中真实状态在 input[type="radio"] 上，须用 input:checked + label.btn 捕获持久选中态，结构需严格为 <input><label class="btn"> 无间隔。
为什么直接写 .btn:active 没反应？
bootstrap 5.3 默认彻底移除了 .btn:active 和 .btn:focus 的 box-shadow，不是 bug，是设计选择——它把视觉反馈权交还给开发者。但如果你用的是 btn-check + label.btn 这套单选按钮组（比如缓冲区、模式切换这类场景），直接改 .btn:active 依然无效，因为真实状态不在按钮上，而在隐藏的 input[type="radio"] 上。
-
:active是瞬时伪类，松开鼠标就消失，无法表示“已选中”这个持久状态 - 必须用
input[type="radio"]:checked + label.btn才能精准捕获当前激活项 - HTML 结构必须严格为：
<input><label class="btn">...</label>，中间不能有空格、注释或文本节点，否则+失效
怎么加阴影才像 Bootstrap 官方风格？
别硬套 box-shadow: 0 2px 4px rgba(0,0,0,.2) 这种通用写法。Bootstrap 的聚焦环（focus ring）是纯扩展外阴影：0 0 0 3px rgba(13, 110, 253, 0.25)，意思是“零偏移、零模糊、3px 扩展、主色半透明”，视觉干净又专业。
- 推荐组合：
box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25); border: 2px solid #0d6efd; - 若按钮本身是
.btn-outline-primary，建议只加box-shadow，避免边框破坏轮廓感 - 如需防止阴影被兄弟元素遮挡，加
position: relative; z-index: 2;
如何限定只作用于某组按钮（比如 name="chooseBuffer"）？
全局污染风险很高——你只想让缓冲区按钮高亮，结果所有 radio 按钮都带蓝边，体验反而混乱。解决方案很简单：把 name 属性纳入选择器。
input[name="chooseBuffer"]:checked + label.btn {
box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.25);
border: 2px solid #28a745;
}
- 颜色用了绿色系（
#28a745），和 Bootstrap 的.btn-success一致，语义更清晰 - 响应式完全不用额外处理——Bootstrap 的栅格类（如
.col-sm-4）、间距类（如.p-2）和这套 CSS 天然兼容 - 不建议用
[name^="choose"]这类模糊匹配，易误伤，显式写死name最稳
React 里为什么加了样式也不生效？
常见错误是试图在 JSX 中用 style={{}} 写内联样式，或者把 onClick 绑在 label 上。这两者都无效：:checked 是 DOM 属性变化触发的伪类，React 的内联样式不会动态更新 DOM 属性；而 onClick 在 label 上会干扰原生表单行为（比如空格键切换失效）。
- 保持 HTML 结构原样，用
for关联或嵌套input（推荐嵌套） - 表单控制用
onChange绑在input上，而非label - CSS 放在外部文件或
<style>块里，确保能命中input:checked + label
name 限定——写对了选择器，却因一个空格或一个没加的 name 属性，导致整组按钮毫无响应。 
