为何CSS样式无法生效？主CSS文件设置h1/h2橙色失效问题

我看了你的代码，发现几个关键问题导致样式没生效，咱们一个个来解决：

1. HTML结构严重错误（最核心问题） #

你的base.html漏掉了<html>和<head>标签！你直接在<!DOCTYPE html>后就写各种样式链接，最后还直接闭合</head>，浏览器解析时会把这些样式标签放到错误位置，自然加载不出正确样式。

赶紧改成正确结构：

{% load static %}
<!DOCTYPE html>
<html>
<head>
    {% load staticfiles %}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'css/master.css' %}">
</head>
<body>
<!-- 下面的header、content等内容保持不变 -->

2. 子模板的样式块放错位置了 #

你在子模板的content块里加了styles块，但base.html根本没定义这个styles块！而且样式表本该放在<head>区域，现在塞到内容里完全是冗余操作——何况base.html已经加载过master.css了。

删掉子模板里这段无用代码：

{% block styles %}
<link rel="stylesheet" href="{% static 'css/master.css' %}">
{% endblock %}

3. 若仍不生效？检查样式优先级 #

Bootstrap自带的标题样式权重可能比你写的高，虽然master.css在Bootstrap之后加载，但保险起见可以把选择器写得更具体：

.container.mycontent h1, .container.mycontent h2 { color: orange; }

要是还不行，临时用!important救急（尽量少用，优先用具体选择器）：

h1, h2 { color: orange !important; }

4. 最后检查静态文件配置 #

如果以上操作都完成后还是没效果，确认Django静态文件设置：

• 确保settings.py中STATIC_URL = '/static/'
• 确认master.css确实放在项目根目录/static/css/下，和模板路径对应
• 生产环境记得执行python manage.py collectstatic

另外提个小问题：你的base.html里Bootstrap脚本链接多了个s（写成httpss://），虽然不影响CSS，但会导致脚本加载失败，顺手改回https://吧。

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