Django模板继承场景下子页面CSS样式不生效如何解决

按以下步骤排查修复即可：

1. 首先修复主模板的HTML语法错误 #

你当前的main.html存在多处不符合HTML规范的写法，会导致浏览器解析DOM结构时出现错乱，CSS选择器无法正常匹配元素：

• 所有列表项<li>标签未写闭合标签</li>
• <hr>和<footer>节点被放在了</body>闭合标签外侧
• 现有代码中<footer>、<body>、<html>标签均无对应闭合标签，会打乱整个页面的DOM树

修正后的主模板参考代码如下：

{% load static %}
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="{% static 'css/style.css' %}">
    </head>
    <body>
        <nav>
            <ul>
                <li><img src="{% static 'images/logo.jpg'%}"  height="49px" width="100px"></li>
                <li><a href="#">HOME</a></li>
                <li><a href="#">ABOUT</a></li>
                <li><a href="rent">RENT</a></li>
                <li><a href="sale">SALES</a></li>
            </ul>   
        </nav> 

        {% block content %}
        {% endblock  %}

        <hr>
        <footer>
            <!-- 在此处补全你的页脚业务代码 -->
        </footer>
    </body>
</html>

2. 排查静态文件加载问题 #

修复结构后如果样式仍未生效，打开子模板对应的渲染页面，右键选择「查看网页源代码」，找到head区域引入CSS的<link>标签，点击href属性对应的路径：

• 如果返回404无法访问：检查项目settings.py中STATIC_URL、STATICFILES_DIRS配置是否正确，确认style.css文件确实存放在static目录的css子文件夹下
• 如果可以正常打开CSS文件：按Ctrl+F5强制刷新页面，清空浏览器本地缓存的旧样式资源即可

3. 排查CSS规则匹配问题 #

如果以上两步都没解决，按F12打开浏览器开发者工具，选中子模板渲染出的#showcase节点，查看右侧样式面板：

• 确认你写的#showcase、.section-main、.container等对应选择器的样式规则存在于CSS文件中，无拼写错误
• 检查是否有更高优先级的样式覆盖了你写的规则（被覆盖的样式会在面板中显示删除线）

注：子模板只要正确写了{% extends 'main.html' %}，就会自动继承主模板head中引入的CSS资源，不需要在子模板中重复引入CSS，也不需要重复加载static标签。

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