Question

我在我的 Django 应用程序上创建了一个模板，它使用自己的 CSS 文件和自己的样式。现在我想在这个模板之上添加我自己的导航栏，我在应用程序的其余部分使用它。

问题是导航栏有自己的样式，模板也有自己的样式，所以将它们混合在一起会弄乱导航栏和模板的其余部分。

我认为使用 include 而不是 extends 可以解决我的问题，但我的问题是当我尝试使用

template.html

{% include 'navbar.html' %}
...

两部分仍然会碰撞。

有什么方法可以在不将元素的所有样式应用到 Django 中模板的其余部分的情况下导入模板中的元素？还是我的 CSS 问题，我应该在那里解决它？任何形式的建议表示赞赏。

Answer 1

您的问题并非与 Django 完全相关，而是与 HTML 和 CSS 的工作方式相关，因此您得到了混合样式。我能想到的是命名您的选择器（类）或通过定义来自顶级父级的路径将样式专门应用于您想要的元素。

例如，如果您的导航栏是这样的：

<nav class="my-nav">
    <ul class="nav-ul">
        <li class="nav-link">Link 1</li>
        <li class="nav-link">Link 1</li>
    </ul>
</nav>

并且您想为该导航栏使用自定义字体，请不要在任何 css 文件中执行此操作：

* {
   font-family: 'Font Name';
}

因为这将应用于该 HTML 页面上的所有内容，相反，请执行以下操作：

/* navbar.css */
nav.my-nav > ul {
   font-family: 'Font Name';
}

/* and for styling links inside */
nav.my-nav > ul.nav-ul > li.nav-link {
   /* styles */
}

通过这样做，您将确保样式仅应用于您打算设置样式的元素。

这是解决 IMO 问题的唯一方法，因为除了使用选择器之外，您无法通过任何其他方式将 CSS 设置为仅应用于 HTML 的特定部分。

Django - 是否可以包含两个不同样式的模板？

1 个答案: