python - 李一个:nth-child with variable from Django doesn't work as expected

Question

我目前正在使用 Django 开发个人博客以提高网络编程水平，但我遇到了一个小问题。我的想法是让网页能够知道哪个菜单元素是事件的，将参数从 views.py 传递到模板。因此，我在这里问为什么会这样。

这是我的模板:

{% block menu %}

        <style> li a:nth-child({{ active }}) { text-decoration: underline; } </style>

    <li><div id="title"><span>{</span> <a href="#">Title</a> <span>}</span></div></li>
    <li><a href="/">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Work</a></li>

{% endblock menu %}

这是我的 views.py(针对特定页面):

def detail(request, blog_id):
    blog = get_object_or_404(BlogPost, pk=blog_id)
    return render(request, 'blogs/post.html', {'blog': blog, 'active': 1})

我试过以 li 的第 n 个 child 为目标，但这也没有用。我还尝试将固定数字作为第 n 个 child 的参数。唉，无济于事。

谁能帮帮我？有没有更好的方法来做到这一点？

Answer 1

这里有几个问题:nth-child 寻找组中的第 n 个子元素。您当前的代码将设置 li 标记内的第 n 个 a 元素的样式 - 但只有一个 a 在每个 li 中。您需要定位 li:

li:nth-child({{ active }}) a { text-decoration: underline; }

您还需要确保 li 元素旁边没有其他任何东西(包括 style 标签)，因为这会弄乱计数器。您上面发布的模板代码不完整(我们看不到外部 ul/ol)，但如果其中有其他元素，那就是一个问题。

也就是说，我不认为这是最好的方法 - 动态内联样式不是一个健壮的、可维护的解决方案。一种更常见的模式是将 active 类添加到事件列表项，然后在您的核心(静态)CSS 中为此设置样式。参见 this question有关如何实现它的一些想法。