页面上有两个 <li> 元素，样式不同答案

【问题标题】：Two <li> elements on page, with different styles页面上有两个 <li> 元素，样式不同
【发布时间】：2014-09-14 19:57:02
【问题描述】：

我正在使用 Django 制作网站，并且我在网站上重叠了

样式。对于页面顶部的菜单，我有一个文件 navigation.html 样式为 navigation.css 但对于我的首页，我有 index.html带有样式 style.css。当我单独使用它们时，我可以看到一切正常，但是当我将导航包含到我的索引页面中时 -

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

命令，所有

元素看起来与 navigation.css 相同，将用于所有页面，但我需要 navigation.css 仅在网站上使用导航，而不是页面的其余部分。

这是我的代码结构：

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 元素样式的命令。

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

【问题讨论】：

您可以在您的 ul/li 中添加一个类或 id 并在此基础上编写 css。

标签： html css django styling

【解决方案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>

仅将样式应用于指定 div id 内的 li 元素的示例 css

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

【讨论】：

如果我将 wright <li class=li-1> sample </li> 并在 css .li-1 { color: red; } insted 中使用 id 会有一些缺点吗？我不熟悉 id 但我可以了解它是否有优势。
你可以给每个 li 自己的 class

【解决方案2】：

重叠的可能性很大。在 html 页面中，最后导入的 css 总是会覆盖以前的 css，所以只需尝试通过为它们提供一个类并将 css 应用到它们的类上来分离你的 navigation.html li 标签和 index.html li 标签。

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*/
    }

【讨论】：