Question

我目前正在尝试为每个列表项设置不同颜色的导航栏。这是html代码

 <ul>
        <li id="item1"><a href="index.html">Home </a></li>
        <li id="item2"><a href="about.html"> About </a></li>
        <li id="item3"><a href="news.html"> News </a></li>
        <li id="item4"><a href="video.html"> Video </a></li>
        <li id="item5"><a href="donate.html"> Donate </a></li>
        <li class="part"><a href="contact.html">Contact</a> </li> 
    </ul>

这是css代码

#item1{background:#7375D8};
#item2{background:#4E51D8};
#item3{background:#1A1EB2};
#item4{background:#303285};
#item5{background:#080b74};
#header ul li.part
{

    background:#689AD3;

}

由于某种原因，只有第1项和第li部分实际上正确显示颜色，其余部分在所有浏览器中都不显示。然而，Dreamweaver在预览部分显示所有颜色，所以我不知道它们的问题是什么。

非常感谢您的贡献。

Answer 1

这只是语法错误！分号应该在花括号内！

#item1{background-color:#7375D8;}
#item2{background-color:#4E51D8;}
#item3{background-color:#1A1EB2;}
#item4{background-color:#303285;}
#item5{background-color:#080b74;}
#header ul li.part
{
    background-color:#689AD3;
}

Answer 2

你没有正确地关闭分号，它是在括号之外，所以这就是它不起作用的原因。请参阅下面的css规则以获取正确的规则。

写下你的css如下：

#item1{background:#7375D8;}
#item2{background:#4E51D8;}
#item3{background:#1A1EB2;}
#item4{background:#303285;}
#item5{background:#080b74;}
#header ul li.part{background:#689AD3;}

Answer 3

半冒号应该在每种风格的闭合支撑之前。未封闭的标签导致问题

为什么我的导航栏上不会显示颜色

3 个答案: