因为Bootstrap 5原生规则带!important，同级选择器权重不足会被覆盖；必须加!important或提高选择器权重，且自定义CSS需在bootstrap.css后加载。
为什么写了 .form-control:focus { box-shadow: none } 却没效果？
不是 CSS 写错了，而是选择器权重不够——Bootstrap 5 的原生规则是 .form-control:focus 带 !important，你写的同级规则会被直接覆盖。开发者工具里如果看到你的 box-shadow 被划掉，基本就是这个原因。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须加
!important：比如.form-control:focus { box-shadow: none !important; } - 或提高选择器权重：用
.my-form .form-control:focus或input.form-control:focus，避免和 Bootstrap 原生规则“撞车” - 确认加载顺序：自定义 CSS 文件必须放在
bootstrap.css之后引入，否则即使写对了也白搭
为什么改了 box-shadow，边框颜色还是变蓝？
因为 box-shadow 和 border-color 是两套独立控制逻辑。Bootstrap 5 聚焦时默认同时改了这两项：border-color: #86b7fe + box-shadow: ...rgba(13, 110, 253, 0.25)。只动 shadow 不碰 border，边框照样会变色。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 要彻底统一视觉，得一起覆盖：
border-color和box-shadow都显式声明 - 别依赖
border-color: initial——它可能回退到用户代理样式，行为不可控 - 深色背景上边框变灰？不是颜色选错，是
border-color值本身在暗色下对比度不足，换更亮的色值（如#6366f1）比调透明度更有效
为什么导航栏里的输入框聚焦阴影“看不见”？
不是样式没生效，是被 .navbar 的 overflow: hidden 裁掉了。Bootstrap 默认给 navbar 设了这个属性，而 box-shadow 是向外绘制的，超出父容器边界就被剪掉了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给输入框加
position: relative和z-index: 2，让它浮出裁剪层 - 必须带
.navbar前缀重写：.navbar .form-control:focus { box-shadow: ... !important; } - 如果用了
.navbar-dark，注意它的$primary被设为浅色（如#f8f9fa），导致生成的 shadow 在深色背景上发灰——得单独写.navbar-dark .form-control:focus覆盖
为什么键盘聚焦没反应，鼠标点击却有？
Bootstrap 5.3+ 默认启用了 :focus-visible，它只在键盘导航时触发，鼠标点击后焦点态会自动降级为普通 :focus。如果你只写了 .form-control:focus，键盘用户根本看不到光晕。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须同时写两个伪类：
.form-control:focus和.form-control:focus-visible -
:focus-visible规则也要加!important，否则会被 Bootstrap 原生带!important的:focus规则压制 - 别删
outline：移除后必须补足视觉反馈，否则键盘用户无法识别当前焦点位置
:focus-visible 的支持策略正在收敛，但各版本行为仍有差异；哪怕你写了双伪类，Chrome 127+ 和 Firefox 128 的触发时机也不完全一致。调试时一定用真实键盘 Tab 导航测试，不能只靠鼠标点。 
