处理css中“li”的第一个或最后一个样式
这个题目真心难取啊，估计仅仅看题目是难以理解的文章写的什么，所以仔细阅读吧，上图为大家驾驶一番
就是为了处理掉上图所标注的最后一个li样式，所以这篇文章应运而生，其实这个问题早在当初折腾代码实现文章仿“无觅”效果的 相关文章的时候便产生了，当初没怎么在意，直到阅读到 @倡萌 的文章后，问题解决了，倡萌那里提供了两种解决办法，都是用的js，但是我并不喜欢这两种方式，于是尝试纯CSS方式。
下面的前两种方法是来自倡萌提供的的JS代码，优点是兼容性好支持低版本的IE6浏览器，不过现在使用IE6的用户真的是越来越少了，你可以大胆的采用CSS的方式来完成这一操作，那就看一看“方法三”吧
方法一
已经引入了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");//关键函数，注意容器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>
方法二
没有引入jQuery库，使用原生js代码实现：
<html>
<title></title>
<head>
<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>
方法三
使用:first-child或:last-child伪类：
纯css的:first-child和:last-child伪类就可以胜任此任务，操作很方便，代码量忽略不计。支持IE7+，不支持IE6（last支持IE8+）
以兼容性更好的:first-child伪类为例，关于:first-child伪类的解释如下：
:first-child 伪类向元素的第一个子元素添加样式。
处理前，需要把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就没有哪条多余的横线啦！
:last-child伪类与:first-child伪类用法相同，不同的是:last-child是为元素的最后一个子元素添加样式
占个沙发，这个伪类都问了你好多次了，都不告诉我 :eek:
@斌果：拜托，:first-child我以为你会啊，这么简单。。。 :!:
@Tokin：我真的不会，从来没看到别人用过。。。。 :grin: :sad:
@斌果：我当初折腾G1的时候，页脚的读者排行，，，你敢说你没问什么吗。。。 :cry:
@Tokin：我记性哪里那么好，看一遍规则就能背下来。。。 :???:
沙发被占了 :twisted: 原来还有这个方法
头像转呀转，头晕
@bbis：你视力太好了，或者心理太强大了，哈哈
主题又换了，还是觉得原来的好哇
@飘零：哪个…G1、2、3…我换了几个了都
右边的云萌是不是搞成感应式的？
@免费资源部落：我也不想挂云盟啊，为了得到盛大的免费VPS，迫不得已啊…现在已经给注释掉了，那东西太大了，影响美感
@Tokin：注释掉了，好看多了，话说这样做不会导致盛大不满？
@免费资源部落：那VPS对我来说是可有可无的，申请下来就试试，好就用，不好就不用，申请不下来也没损失…
生命不止，折腾不休 :shock:
对一个不懂代码的人来说，你写的再清楚终究还是不懂，对懂的人来说你只要点出来人家就知道。
所以我是属于不懂代码的那一类 :sad:
主机速度杠杠的 :razz:
@无名：我这文章是写给那些半懂半不懂的人的…
@Tokin：我就是
@斌果：还可以:last-child，控制最后一个元素
比较喜欢第三种 有些菜单中间加上间隔 最后一个也是这么去掉的
@刘荣焕：第三种办法是缺憾第一个li样式…
每个都能控制的nth-child
@大发：我只知道这个伪类…看文档看了好久，没发现别的类似的…纠结
@大发：刚才重新看了下，发现我有用这东西，不过这个东西不支持IE8…不知道IE9行不行…
过来学习下，这么多的方法，对我用处大大。支持下博主。
也这么解决的。。。 :sad:
@公子：我之前没用线…后来才用的
@Tokin： :smile: :smile: 能解决问题就好。。。
不晓得你在嗦什么
@OYOY：你可以直接忽略这个文章…
@Tokin：艹
现在的邮件略叼
@OYOY：邮件样式吗？
CSS看了头疼啊。
@tiandi：觉得CSS是个美妙的东西…
@Tokin：我也是
发现现在变懒了，唉~ :eek:
@ye,夜：不要懈怠，每次觉得没什么可写的时候，就写一下心情拉拉家常，不然就没必要玩博客了…
@Tokin： :cry: :cry: 道理谁都懂。。。
挺厉害哦
技术人就是不一样
嗯，路过学习下 :razz:
你的广告效果怎么样？
@醉风云博客：我的广告效果怎么样？什么意思…
@Tokin：我是说你的搜狗联盟的广告赚钱不
@醉风云博客：还行吧，2012.12挂的广告，到2013.05月月低，应该就70多块钱了…满100提现。
要吐嘈的就是，我至今没搞清楚“千次展示”的收益是什么情况，而且搜狗单价特别神奇，最低2分钱一点击，大多数都是3毛左右一点击…
博客越来越好看啦~
评论的样式越来好看了，想扒皮了 :eek: :eek:
@木头怀：我很爱他的发表评论横幅，就是带头像的，很好
@斌果：哦，可以果断扒皮呀 :?: :?:
@木头怀：我问他要主题了，正在本地折腾我的新主题
@斌果：我一要一份？？
@木头怀：你又不是wordpress。。。
喜欢就得扒皮，源码给你也没用。。。。。
@斌果：你的站打不开？挂了？
@木头怀：没有啊，一切正常
深夜没事来评论下!!
@晒太阳的奶酪：九点…我刚放学到家
伪类 first-child last-child 的确挺方便的，个人觉得，就以不必考虑IE6了
@胡倡萌：我尝试了下，貌似IE7不支持。。。不过也无关紧要，用从来没见过身边的朋友用IE7
:lol: :lol: :lol: :lol: :lol: 星期日来访
好礼你好
G2测试下，测测测
@斌果：我怎么被认证啦 :smile: :smile: :smile: :smile: :smile: :smile: :smile:
恩好奥的
话说。。不碍眼啊。。就1px。。。
过来学习了。。。
这个实用，收下了， :smile:
真的非常好 继续关注
去试试了，
用了JQ就方便多了
学习了.
很简单,对吧
哈哈到现在才看到这个的，貌似一直用伪类……
我居然从百度进来的，在首页第二个位置。
没有百度我兴许是第一个位置