WordPress主题中自定义CSS无法覆盖Bootstrap的问题求助

兄弟，我太懂这种抓耳挠腮的感觉了——明明在别的Bootstrap项目里顺风顺水，到WordPress这儿就像CSS文件凭空消失了一样！别慌，咱们一步步排查，大概率是这几个常见坑在搞鬼：

1. 先确认CSS加载顺序是否正确 #

Bootstrap的样式必须先于你的自定义CSS加载，否则你的样式会被Bootstrap的默认样式覆盖。在WordPress里，你可以通过functions.php来控制加载顺序，给自定义样式指定依赖项，确保它在Bootstrap之后加载：

// 先注册Bootstrap样式（如果主题没自带的话）
wp_enqueue_style( 'bootstrap-style', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '5.3.0' );

// 再注册你的自定义样式，把Bootstrap的handle作为依赖
wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/css/custom.css', array( 'bootstrap-style' ), '1.0.0' );

这样WordPress会保证Bootstrap先加载，你的自定义CSS紧跟其后。

2. 检查选择器优先级是否足够 #

Bootstrap的很多选择器是比较具体的（比如.container .col-md-6），如果你的自定义选择器太宽泛（比如单个类.my-blue-background），优先级不够就会被覆盖。你可以：

• 提高选择器的特异性：比如用body .my-blue-background或者#main-content .my-blue-background，让你的选择器比Bootstrap的更具体
• 万不得已时用!important（尽量少用，避免后续维护麻烦）：

  .my-blue-background {
    background-color: #007bff !important;
  }
  

3. 清掉各种缓存！ #

WordPress生态里缓存太常见了——主题自带缓存、缓存插件（比如WP Rocket、W3 Total Cache）、CDN缓存，甚至浏览器缓存。你需要：

• 硬刷新浏览器（Ctrl+Shift+R或者Cmd+Shift+R），跳过本地缓存
• 在后台清空缓存插件的缓存
• 如果用了CDN，也得清CDN的缓存

4. 确认你的CSS文件真的被加载了 #

打开浏览器开发者工具（F12），切换到「网络」标签，刷新页面后搜索你的自定义CSS文件名：

• 如果显示404错误，说明路径写错了，检查get_stylesheet_directory_uri()或get_template_directory_uri()的使用是否正确
• 如果根本找不到文件，说明你在functions.php里的注册代码有问题，再检查拼写和参数

5. 排查类名冲突或拼写错误 #

别小看这种低级错误！有时候就是手滑把.my-blue-background写成了.my-blue-backgroud，或者你的类名和主题/插件的类名重了，导致样式被覆盖。仔细核对HTML里的类名和CSS里的是否完全一致。

6. 检查是否有内联样式或插件干扰 #

有些WordPress插件或者主题会给元素添加内联样式，内联样式的优先级比外部CSS高。这时候你要么用更具体的选择器+!important，要么找到内联样式的来源（比如主题设置、插件选项）去修改它。

按照这个顺序排查，90%的情况都能解决问题！

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