想过用last-child但但兼容性有问题,所以放弃,大家有没有更简单的方法?
总共想了如下几个方法,自己挑着用
1,
.wrap_title li a:not(:first-child){
background:url("line.png") no-repeat left center;
}
2,
.wrap_title li a:not(:last-child){
background:url("line.png") no-repeat right center;
}
3,
.wrap_title li a{
background:url("line.png") no-repeat right center;
}
.wrap_title li a:last-child{
background:none;
}
4,
.wrap_title li a{
background:url("line.png") no-repeat left center;
}
.wrap_title li a:first-child{
background:none;
}
5,
给最后一个设置class,比如last-item
.last-item{
background:none;
}
margin负值隐藏掉应该可以。。
既然都想到了
last-child
了,那就换一个思路。既然last-child
有兼容性,但是first-child
没有兼容性啊!所以,这里可以把a
的background
都换成left center
,然后用first-child
的background:none
.wrap-title
设置margin-right: -1px;
个人建议用边框代替这种只有一条线的图片
css选择器是一个很好の工具,但是不支持ie8如果你确定了菜单数量,你可以通过+这种相近选择器。支持ie8浏览器的~
对于这种类似边框的分割线,倒不如直接用border-right 来的方便。兼容性的问题不怎么严重。
我平时使用的是:last-of-type,但没有搞清楚它与:last-child哪个好