处理css中“li”的第一个或最后一个样式
2015-07-28 14:39:09
在写网页的时候，有的时候需要第一个li或者最后一个li和其他的li的样式不一样，要达到这样的效果怎样写呢？
方法一：
已经引入了jQuery库，再加一句简单的js代码即可：
<html>
<title></title>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>//引入jQuery库
<script type="text/javascript">
$(function(){
$("#test li:last").css("border","none");//最后一个li。关键函数，注意容器id“#test”要和html代码中一样
$("#test li:eq(0)").css("border","none");//第一个li
})
</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>方法二：
没有引入jQuery库，使用原生js代码实现：
<html>
<title></title>
<head>
<script type="text/javascript">
window.onload = function urlborder() {
document.getElementsByTagName('ul')[0].getElementsByTagName('li')[0].style.fontWeight = '18px';//第一个li
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";//最后一个li
}
}
}
</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>上面的代码，我觉得使用起来有点麻烦，可不可以只用css就能完成呢？
方法三，使用:first-child
纯css的:first-child伪类就可以胜任此任务，操作很方便，代码量忽略不计。支持IE7+，不支持IE6
关于:first-child伪类的解释：:first-child 伪类向元素的第一个子元素添加样式。详细解释，go
处理前，需要把li样式的right线改为left：
参考代码：
.relatebar li{width:98px;height:146px;padding:5px;float:left;border-left:1px solid #ccc;}
.relatebar li:first-child{border-left:0px solid #ccc;}解释：
用:first-child伪类给li的第一个样式改为0px，或者none也行，这样第一个li就没有哪条看似多余的横线啦！
