导航ul li样式中如何去掉最后一个li背景或样式

导航ul li样式中如何去掉最后一个li背景或样式，ul li布局中对li赋予背景或边框样式，最后一个li又不想要设置的css样式，如何去掉？

我们在制作导航条的时候，经常会用到竖线来把li里面的内容隔开，一般我们会用到border-right这个属性，但是我们会发现一个问题，就是最后一个li的右边也会产生一个坚线，如果去掉这个呢，下面我就告诉大家三个方法。

第一种方法：很简单，我们一般会把css样式写在样式表中，那我们就在前端的li里面加上这样一段代码就可以了：style="border:none";把它所有的边框都设为不见。

第二种方法：引入一个jquery库，例子如下：

<!DOCTYPE html>  
<html>  
<head>  
<title>去掉最后一个li样式</title>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>  
<script type="text/javascript">  
$(function(){  
$("#test li:last").css("border","none");//关键函数，注意容器id"#test"要和html代码中一样  
})  
</script>  
<style type="text/css">  
ul, li { margin:0; padding:0; list-style:none; }  
#test { width:200px; }  
#test li { width:100%; height:24px; border-right:1px solid red; }  
</style>  
</head><body>  
<ul id="test">  
    <li>菜单一</li>  
    <li>菜单二</li>  
    <li>菜单三</li>  
</ul>  
</body>  
</html>

JS库下载：

立即下载（19KB）

第三种方法：没有引入jquery库，直接用js写的

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>去掉最后一个li样式</title> 
<script type="text/javascript"> 
window.onload = function urlborder() { 
var listr = document.getElementById("test").getElementsByTagName('li'); 
//注意容器id"test"要和html代码中一样 
for (var i = 0; i < listr.length; i++) { 
if (i == listr.length - 1) { 
listr[i].style.borderWidth = "0"; 
} 
} 
} 
</script> 
<style type="text/css"> 
ul,li{ margin:0; padding:0; list-style:none; } 
#test{ width:200px;} 
#test li{ width:100%; height:24px; border-right:1px solid red;} 
</style> 
</head> 
<body> 
<ul id="test"> 
<li>菜单一</li> 
<li>菜单二</li> 
<li>菜单三</li> 
</ul> 
</body> 
</html>

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/wenji/w616.shtml