为何我的CSS类未被覆盖？Bootstrap text-center不生效排查

首先，你可能混淆了HTML类名的顺序和CSS样式的加载顺序之间的关系——HTML中类名的先后并不决定样式优先级，真正起作用的是CSS规则在样式表中出现的顺序（当选择器特异性相同时）。

核心原因 #

你提到content-panel类包含text-align: left;，而Bootstrap的text-center类的默认定义是：

.text-center {
  text-align: center;
}

这两个选择器都是单一类选择器，特异性完全相同（权重均为0,0,1,0）。此时，哪个样式规则在CSS文件中加载得更晚，哪个就会生效。

如果你的自定义样式（包含.content-panel的规则）是在Bootstrap的样式表之后引入的，那么.content-panel的text-align: left就会覆盖.text-center的text-align: center，不管HTML里类名写在前面还是后面。

快速验证方法 #

打开浏览器开发者工具（按F12），选中这个<div>元素，查看Styles面板：

• 找到text-align属性，观察哪条规则被划掉（被覆盖的规则会显示删除线）
• 确认规则的来源文件，判断是否是自定义样式在Bootstrap之后加载

可行的解决方法 #

你有几个可选方案：

• 调整样式加载顺序：把Bootstrap的CSS文件放在你的自定义样式文件之后，这样Bootstrap的.text-center规则会覆盖.content-panel的text-align设置
• 提高选择器特异性：给目标元素的text-center规则增加额外特异性，比如：

  .content-panel.text-center {
    text-align: center;
  }
  

  这个选择器的特异性为0,0,2,0，比单一的.content-panel更高，会优先生效
• 应急行内样式（不推荐长期使用）：直接在元素上写style="text-align: center;"，行内样式的特异性最高，会覆盖所有类选择器规则

关于inline-panel的说明 #

你的inline-panel类设置了display: inline-block;，这不会影响text-align的生效——inline-block元素本身可以应用text-align属性来对齐内部文本，所以这个类不是问题的根源。

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