在 Django 中通过 CSS 设置活动状态答案

【问题标题】：Setting active states through CSS in Django在 Django 中通过 CSS 设置活动状态
【发布时间】：2011-11-26 13:31:28
【问题描述】：

我在通过 CSS 设置活动状态时遇到问题。如果我使用正文，它可以工作，但是因为我使用的是 django，所以我使用模板，所以在每个页面中都有是不切实际的。

我正在尝试使用 div 代替，但只是在 div 标签上使用相同的方法似乎不起作用，知道为什么吗？

和 Django 有关系吗？

为什么会这样：

body#home a#homeNav,
body#profile a#profileNav,
body#settings_account a#settingsNav,
body#settings_profile a#settingsNav,
#login a#loginNav{
    color:white;
}

{% extends "base_pages/base.html" %}
{% block content %}
    <body id="home">
    </div>
{% endblock %}

但这不是？

div#home a#homeNav,
div#profile a#profileNav,
div#settings_account a#settingsNav,
div#settings_profile a#settingsNav,
#login a#loginNav{
    color:white;
    border-top: 3px solid #09F;
}

{% extends "base_pages/base.html" %}
{% block content %}
    <div id="home">
    </div>
{% endblock %}

【问题讨论】：

避免过度指定 CSS 选择器。不要使用div#home，而是尝试使用#home。代替a#homeNav，使用#homeNav。更好的是，给你的导航链接一个共同的类或祖先 - nav a 或 a.nav。无论如何，在不知道base_pages/base.html 模板有什么的情况下，不可能提供适当的帮助。更好的是，提供 HTML 输出。
FWIW：我通常会做类似<body class="{% block body_class %}{% endblock %}"> 的事情。然后，您可以在任何模板中轻松设置类。您甚至可以在设置继承时提供继承：{% block body_class %}{{ block.super }} additional_class{% endblock %}
与几乎所有关于渲染模板的问题一样，如果没有看到渲染代码而不是模板代码，这很难回答。如果您遇到 CSS 问题，则问题几乎从不与后端相关 - 它始终与呈现的 HTML 相关，通常您看不到它的原因是您没有没想到那里看。向我们展示呈现的 HTML，我们可以回答这个问题。
谢谢克里斯，解决了。谢谢大家的帮助
@incarna 请不要在标题中将您的问题标记为“已解决”。相反，礼仪是接受解决了您的问题的答案，或者，如果问题是由 cmets 解决的，就像这里的情况一样，您自己发布一个答案，总结您为解决问题所做的工作，然后接受。

标签： html css django

【解决方案1】：

“FWIW：我通常会做类似的事情

<body class="{% block body_class %}{% endblock %}">.

然后允许您在任何模板中轻松设置类。当你设置它时，你甚至可以适应继承：

{% block body_class %}{{ block.super }} additional_class{% endblock %}

——克里斯·帕拉特”

【讨论】：