应重写.alert .close::before的color、font-size和line-height并加!important；需确保点击区域≥44×44px，避免仅依赖伪元素交互；升级时注意选择器权重变化。
如何覆盖Bootstrap提示框的关闭按钮颜色和大小
Bootstrap默认用.close类控制提示框（.alert）右上角的×按钮，但它的样式是通过伪元素::before生成的，直接改color或font-size往往无效——因为伪元素有自己的继承链和默认值。
真正起作用的是对.close::before的显式重写：
/* 必须加 !important 才能压过 Bootstrap 的 specificity */
.alert .close::before {
color: #dc3545;
font-size: 1.5rem;
line-height: 1;
}
- 不加
!important时，Bootstrap 5 的color: #000（带!important）会赢 -
line-height: 1很重要：否则×可能上下偏移，尤其在小尺寸alert里 - 别只改
.close本身——它只是容器，真正显示×的是::before
为什么用::before而不是content替换×符号
Bootstrap 5 把×写死在::before { content: "×" }里，不是用SVG或字体图标。想换成其他符号（比如「✕」或「?」），不能只改content值——某些字体不支持这些字符，渲染会变成方块或空白。
更稳妥的做法是用字体图标或内联SVG，但得绕开伪元素限制：
- 删掉原生
.close，自己写一个带<svg></svg>的按钮，放在.alert内部右上角 - 或者保留
.close，但用display: none隐藏::before，再用::after插入SVG base64（兼容性略差） - 如果坚持用
content，推荐用 Unicode「\00d7」（×）或「\00d7\fe0f」（带变体选择符），比「✕」更通用
移动端点击区域太小导致关不掉
Bootstrap默认给.close设了padding: .25rem .5rem，在手机上实际可点区域只有约20×20px，远低于WCAG建议的44×44px最小触控尺寸。
修复方式不是盲目加大padding——那会让按钮在窄屏上挤出alert边界：
- 用
min-width和min-height保底，同时设padding为0.5rem以上 - 加
transform: translate(-50%, -50%)配合position: absolute，把点击热区中心锚定在右上角，避免靠边被截断 - 测试真机：iOS Safari 对
pointer-events在伪元素上的支持不稳定，别依赖::before响应点击
与Bootstrap版本升级相关的断裂风险
从Bootstrap 4升到5，.close的HTML结构没变，但CSS规则权重明显提高——特别是.alert-dismissible .close这种组合选择器，优先级比你写的.alert .close高。
升级后发现样式失效，先检查：
- 开发者工具里，是不是你的规则被标了「strike-through」？说明被更高优先级覆盖
- Bootstrap 5.3+ 开始用
:where()降低部分选择器权重，但.close相关规则仍没用:where包裹 - 如果用CSS-in-JS或Shadow DOM，
::before可能根本无法穿透，得换用自定义关闭按钮组件
最省事的兼容写法是复制Bootstrap源码里.close的完整选择器链，再在其后追加::before样式，不依赖简写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
