Html 如何创建两种li样式？_Html_Css_Styles_Html Lists

Html 如何创建两种li样式？

html css

Html 如何创建两种li样式？,html,css,styles,html-lists,Html,Css,Styles,Html Lists,我已经创建了一个li-ul菜单，它工作得非常好。但是，我希望下面代码中的最后一个li具有不同的背景我已经尝试将style=“background color:#F00”添加到所讨论的li中，但它不起作用有人知道如何做到这一点吗提前感谢, <!DOCTYPE html> <html> <head> <style type="text/css"> #cssmenu { background:#a8ac9d; width: 270PX; }

我已经创建了一个li-ul菜单，它工作得非常好。但是，我希望下面代码中的最后一个li具有不同的背景

我已经尝试将style=“background color:#F00”添加到所讨论的li中，但它不起作用

有人知道如何做到这一点吗

提前感谢,

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

#cssmenu {
background:#a8ac9d;
width: 270PX;
}
#cssmenu > ul {
padding:1px 0;
margin:0px;
list-style:none;
width:270px;
height:21px;
font:normal 8pt verdana, arial, helvetica;
}
#cssmenu > ul li {
margin:0;
padding:0;
display:block;
float:left;
position:relative;
width:270px;
}
#cssmenu > ul li a:link, #cssmenu > ul li a:visited {
padding:4px 0;
display:block;
text-align:center;
text-decoration:none;
background:#a8ac9d;
color:#ffffff;
width:270px;
height:13px;
}
#cssmenu > ul li:hover a, #cssmenu > ul li a:hover, #cssmenu > ul li a:active {
padding:4px 0;
display:block;
text-align:center;
text-decoration:none;
background:#a8ac9d;
color:#ffffff;
width:270px;
height:13px;
}
#cssmenu > ul li ul {
margin:0;
padding:0px 0px 0;
list-style:none;
display:none;
background:#a8ac9d;
width:270px;
position:absolute;
top:21px;
left:0px;
}
#cssmenu > ul li:hover ul {
display:block;
width: 270PX;
}
#cssmenu > ul li ul li {
width:146px;
clear:left;
width:270px;
}
#cssmenu > ul li ul li a:link, #cssmenu > ul li ul li a:visited {
clear:left;
padding:4px 0;
width:270px;
position:relative;
z-index:1000;
}
#cssmenu > ul li ul li:hover a, #cssmenu > ul li ul li a:active, #cssmenu > ul li ul li a:hover {
clear:left;
background:#a8ac9d;
padding:4px 0;
width:270px;
position:relative;
z-index:1000;
}
</style>

</head>

<body>

<div id='cssmenu'>
<ul>
<li><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Product 1</span></a></li>
<li style="background-color="#F00"><a href='#'>Product 2</a></li>
</ul>
</li>
</ul>
</div>

</body>

</html>


#cssmenu{
背景：#a8ac9d；
宽度：270PX；
}
#cssmenu>ul{
填充：1px0；
边际：0px；
列表样式：无；
宽度：270px；
高度：21px；
字体：标准8pt verdana，arial，helvetica；
}
#cssmenu>ul li{
保证金：0；
填充：0；
显示：块；
浮动：左；
位置：相对位置；
宽度：270px；
}
#cssmenu>ul li a:链接，#cssmenu>ul li a:已访问{
填充：4px0；
显示：块；
文本对齐：居中；
文字装饰：无；
背景：#a8ac9d；
颜色：#ffffff；
宽度：270px；
高度：13px；
}
#cssmenu>ul li:悬停a，#cssmenu>ul li a:悬停，#cssmenu>ul li a:活动{
填充：4px0；
显示：块；
文本对齐：居中；
文字装饰：无；
背景：#a8ac9d；
颜色：#ffffff；
宽度：270px；
高度：13px；
}
#cssmenu>ul li ul{
保证金：0；
填充：0px 0px 0；
列表样式：无；
显示：无；
背景：#a8ac9d；
宽度：270px；
位置：绝对位置；
顶部：21px；
左：0px；
}
#cssmenu>ul li：悬停ul{
显示：块；
宽度：270PX；
}
#cssmenu>ul li ul li{
宽度：146px；
清除：左；
宽度：270px；
}
#cssmenu>ul li a:链接，#cssmenu>ul li a:已访问{
清除：左；
填充：4px0；
宽度：270px；
位置：相对位置；
z指数：1000；
}
#cssmenu>ul li ul li:悬停a，#cssmenu>ul li ul li a:活动，#cssmenu>ul li ul li a:悬停{
清除：左；
背景：#a8ac9d；
填充：4px0；
宽度：270px；
位置：相对位置；
z指数：1000；
}




我没有详细阅读，但乍一看，这一行是问题所在
<li style="background-color="#F00"><a href='#'>Product 2</a></li>

我没有详细阅读，但乍一看，这一行就是问题所在
<li style="background-color="#F00"><a href='#'>Product 2</a></li>

编写样式
属性时，要遵循的语法与css中的语法相同。您已经编写了style=“background color=“#F00”
，它应该是style=“background color:#F00”
当您编写style
属性时，要遵循的语法与css中的语法相同。您已经编写了style=“background color=“#F00”
，它应该是style=“background color:#F00”
您需要为li
中的a标记编写它
加上这个
#cssmenu ul li ul li:last-child a{
background:red
}

您需要为li

加上这个
#cssmenu ul li ul li:last-child a{
background:red
}

李：最后一个孩子
？并将提交代码中的style=“background color=“#F00”更改为style=“background color:#F00；“li:last child
？并在提交的代码中更改style=“background color=“#F00”应为style=“background color:#F00；”