使用Django时CSS已加载但无法覆盖Bootstrap样式求助

问题背景 #

项目文件夹结构 #

settings.py 配置 #

STATIC_URL = '/static/'

STATIC_ROOT = BASE_DIR / 'static'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR,'blog','static'),
]

HTML代码片段 #

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lexie's blog</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="{% static 'css/blog.css' %}">
</head>

核心问题 #

Bootstrap样式正常生效，但自定义的blog.css无法覆盖Bootstrap样式。已确认blog.css正常加载（200状态、MIME类型正确、可直接访问源码），排除静态文件加载/解析问题。

解决方案 #

问题根源是**CSS选择器优先级（特异性）**不足，Bootstrap的选择器比自定义样式更具体，导致无法覆盖。以下是具体解决办法：

• 提升选择器特异性
  比如Bootstrap使用.container，你可以用更具体的选择器，例如body .container，或者给目标元素添加自定义类（如<div class="container my-blog-container">），然后在blog.css中写.my-blog-container { ... }，通过更高的特异性覆盖Bootstrap样式。

• 应急使用!important（不推荐长期用）
  在需要覆盖的样式属性后添加!important，强制提升优先级：

  .container {
      padding: 2rem !important;
  }
  

  注意：频繁使用!important会导致后续样式维护困难，尽量优先用选择器特异性解决。

• 排查CSS语法错误
  即使文件能加载，也可能存在语法错误导致样式失效。可以先简化blog.css代码，比如写一个测试样式：

  body {
      background-color: #f0f0f0 !important;
  }
  

  验证页面背景是否变化，排查是否是代码本身的问题。

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