如何創建兩個li風格？

我已經創建了一個菜單，它的工作完美。但是，我希望以下代碼中的最後一個li具有不同的背景。如何創建兩個li風格？

我試着向有問題的li添加style =「background-color：＃F00」，但它不起作用。

有誰知道這可以做到嗎？

由於提前，

<!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>

來源

2013-01-23 Darren Riches

'李：最後所child'？和變化'Product 2'到'Product 2' – Morpheus

風格=」背景顏色= 「＃F00」在submited代碼中應該是style =「background-color：＃F00;」 – Ganhammar

你需要把它寫的a tag這是裏面的li

添加此

#cssmenu ul li ul li:last-child a{ 
background:red 
}

DEMO

來源

2013-01-23 10:50:42 Sowmya

輝煌，我知道它會很簡單，非常感謝！ –

~~我沒有詳細，但乍一看看，這條線就是問題所在。~~

<li style="background-color="#F00"><a href='#'>Product 2</a></li>

應該

<li style="background-color:#F00"><a href='#'>Product 2</a></li>

編輯：上面的代碼不起作用！這是因爲具有背景色的元素是。所以你應該改變這一點。

<li><a href='#' style="background-color:#F00">Product 2</a></li>

來源

2013-01-23 10:47:23 Dukeland

這仍然不會工作 – Sowmya

當您編寫style屬性時，要遵循的語法與css中的相同。你寫style="background-color="#F00"，它應該是style="background-color: #F00"

來源

2013-01-23 10:49:44 Kangkan

如何創建兩個li風格？

回答

相關問題