如何检查:focus伪类的属性？Bootstrap按钮:focus样式排查

• 方法一：通过键盘触发真实:focus状态
  Bootstrap部分按钮的聚焦样式仅在键盘导航触发时生效，鼠标点击不会激活对应状态。操作步骤：

  1. 打开开发者工具（F12/右键审查元素）
  2. 点击页面空白区域，确保焦点不在开发者工具上
  3. 按Tab键直到选中目标Primary轮廓按钮，此时按钮进入真实:focus状态
  4. 回到开发者工具的样式面板，就能看到该状态下的所有属性，包括阴影对应的box-shadow或CSS变量

• 方法二：强制激活:focus-visible伪类
  Bootstrap 5.3的按钮聚焦阴影实际绑定在:focus-visible伪类上，而非普通:focus。操作步骤：

  1. 在元素面板选中目标按钮
  2. 点击样式面板右上角的:hov按钮打开伪类菜单
  3. 同时勾选:focus和:focus-visible，即可查看聚焦阴影的样式属性
  4. 在样式列表中查找box-shadow或--bs-btn-focus-box-shadow变量，就能获取阴影的具体参数

• 方法三：直接搜索CSS变量
  Bootstrap按钮样式依赖CSS变量，可直接在样式面板的搜索框输入--bs-btn-focus-box-shadow，快速定位到该变量的定义与使用，无需触发聚焦状态即可查看阴影参数

补充：Bootstrap 5.3中，轮廓按钮的:focus-visible默认阴影样式为box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25)

内容的提问来源于stack exchange，提问作者user2309803