Question

我正在使用Django建立网站，我正在重叠＆lt; li>网站上的样式。对于我在页面顶部的菜单，我有一个文件 navigation.html ，样式 navigation.css ，但对于我的首页，我有 index.html 样式 style.css 。当我单独使用它们时，我可以看到一切正常，但是当我将导航包含在我的索引页面中时 -

{% include "app/navigation.html" %}

命令，全部＆lt; li>元素看起来与 navigation.css 将用于所有页面相同，但我需要 navigation.css 仅用于网站导航，而不是页面的其余部分。< / p>

这是我的代码结构：

Index.html

<link rel="stylesheet" type="text/css" href="{% static 'app/style.css' %}" />
{% include "polls/components/navigation.html" %}
<ul>
    <li><a href="#">something something</a></li>
    <li><a href="#">nothing nothing</a></li>
</ul>
...

Navigation.html

<link rel="stylesheet" type="text/css" href="{% static 'app/navigation.css' %}" />
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About us</a></li>
</ul>
...

我认为可能有两种方法可以解决它，但我不知道如何用以太方式。

不知怎的，我需要让 navigation.css 只能设置 navigation.html 文件的样式。
在 index.html 中，我需要插入一些命令，可以为不同的部分分割li元素样式。

可能很简单，但我是初学者，所以如果有人可以分享智慧会很好。

Answer 1

您可以将每个菜单放在仅适用于该菜单的div中，然后在您的css中相应更改。

这是jsfiddle显示我的意思。

示例html div包装不同的菜单

<p>nav type a</p>
<div id="nav-a">
    <ul>
        <li>
            <a href="#">nav type a</a>
        </li>
        <li>
            <a href="#">nav type a</a>
        </li> 
    </ul>
</div>
<p>nav type 2</p>
<div id="nav-b">
    <ul>
        <li>
            <a href="#">nav type b</a>
        </li>
        <li>
            <a href="#">nav type b</a>
        </li> 
    </ul>
</div>

示例css仅将样式应用于指定div id

中的li元素

#nav-a ul li{
    background:yellow;
    display:inline-block;
}
#nav-b ul li{
    background:green;
    display:inline-block;
}

Answer 2

重叠是非常可能的。在html页面中，最后导入的css将始终覆盖以前的css，因此只需尝试将您的navigation.html li标签和＆amp; index.html li tag为他们提供一个类并在他们的类上应用css。

nav.html


    <ul class = 'nav'>
    <li>something </il>
    <li> lorem </li>
    </ul>

nav.css

    .nav li
    {
    /*css goues here*/
    }


similarly for index.html
    <ul class = 'index'>
    <li>something </il>
    <li> lorem </li>
    </ul>

index.css

    .index li
    {
    /*css goues here*/
    }

页面上有两个<li>元素，具有不同的样式</li>

2 个答案: