Django模板继承base.html后自定义CSS的line-height规则失效问题

核心原因 #

• CSS优先级冲突：base.html中引入的外部CSS文件存在针对.menu-item/.menu-open-button的line-height规则，优先级高于你在子模板中写的规则，导致被覆盖。
• 样式放置位置不规范：你将style标签放在了content块（对应页面body区域），不符合HTML规范，部分浏览器解析时可能出现优先级计算异常，且如果base中存在后加载的全局样式，也会优先覆盖body内的样式规则。

排查及修复步骤 #

1. 快速确认覆盖来源
   打开浏览器开发者工具（F12），选中对应的toggle按钮元素，查看「样式」面板中你的line-height规则是否被划掉，被划掉则说明存在更高优先级的规则覆盖，面板会直接显示生效规则的来源文件。
2. 提升自定义样式优先级
   • 测试验证：给需要的规则加!important临时测试，示例：

     .menu-item,
     .menu-open-button {
       line-height: 100px !important;
     }
     

     加完后如果生效，即可确认是优先级问题。
   • 正规修复方案：在base.html的<head>标签内新增专属样式块：

     <!-- base.html head标签内添加 -->
     {% block extra_css %}{% endblock %}
     

     然后在toggle.html中将所有样式、link标签从content块移到extra_css块中：

     {% extends 'mains/base.html' %}
     {% load static %}
     {% block extra_css %}
     <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
     <style>
       /* 你的所有样式规则放这里，line-height改成你需要的100px */
       .menu-item,
       .menu-open-button {
         line-height: 100px;
         /* 其他原有样式 */
       }
     </style>
     {% endblock %}
     
     {% block content %}
     <!-- 这里只放页面内容代码 -->
     {% endblock %}
     

   • 如果还是被覆盖，可以加长选择器提升优先级，比如给按钮外层父容器加个类名.toggle-wrapper，选择器改成.toggle-wrapper .menu-item, .toggle-wrapper .menu-open-button即可。
3. 定位冲突的基础样式
   逐个注释base.html中引入的外部CSS链接，注释到某条后样式恢复正常，即可定位到冲突的样式文件，按需调整对应规则即可。

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