如何让ie兼容first-css last child 兼容和last

来源：蜘蛛抓取(WebSpider) 时间：2016-04-12 06:18 标签： firstchild兼容性
让IE7/8使用CSS中first-child和last-child样式属性_博客园
当前位置： >
>让IE7/8使用CSS中first-child和last-child样式属性
让IE7/8使用CSS中first-child和last-child样式属性
& 作者：快乐八哥 & 来源： 博客园-liminjun88 &
项目最终效果如下图所示：
可以看出2个tab之间有一天分割线，这条分割线没有使用单独的div或者span。而是使用li标签的border-right。但是最后一个需要隐藏，否则效果不是很理想。
最原始的写法是：
#tabnav li:last-child
border-right:
在常用的浏览器中测试都通过了。但是IE7/8中，此样式不起作用。D右侧的边框还是会出现。我想了一下，那就给最后一个li加一个样式：
&li id=&sub_nav_user& class=&dcontent lastitem& &&a &D Content&/a&&/li&
lastitem是我们为最后一个li标签添加的类。然后给lastitem添加border-right:none。以为大功告成，但是忘了项目还与权限有关。管理员可以看到以上A，B，C，D四个选项。但是普通用户只能看到A和B2个选项。这下问题出来了，我不能直接给B的border-right设置为none。后来想了一个方法就是给C选项设置border-left:1px solid #6655cc。但是样式需重调，这样显得有点麻烦。既然last-child是针对最后一个元素进行样式设定的，那么我们可以通过jQuery达到同样的效果。也不需要给最后一个li添加lastitem的样式了。代码如下：
$(&#tabnav li:last&).addClass(&lastitem&);
#tabnav .lastitem
border-right:
这样当然不是最好的做法。但是我们有时需要转变思路，这样有时可以达到事半功倍的效果。
相关阅读：
来源：（微信/QQ：,微信公众号：makaidong-com） &&&&&& 欢迎分享本文，转载请保留出处！
&&&&&& 【原文阅读】:
上一篇：没有了
【相关文章】
每日最新文章
每日最热文章
本周最热文章
本月最热文章
本年最热文章
Powered by
Copyright &
, All Rights ReservedCSS 参考手册
CSS :first-child 选择器
匹配属于父元素中第一个子元素的每个&p&元素
p:first-child
background-color:
定义和用法
:only-child选择器匹配属于父元素中唯一子元素的元素。
浏览器支持
所有主流浏览器都支持:only-child选择器。除了IE8和更早版本。
注意: :first-child在IE8和更早版本IE版本中必须声明
&p&元素是其父级的第一个子元素，每个&p&元素的 &i&元素的样式：
p:first-child i
background:
列表中的第一个 &li&元素选择的样式：
li:first-child
background:
每一个&ul&元素的第一个子元素选择的样式：:
ul&:first-child
background:各浏览器对CSS选择符兼容性_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
各浏览器对CSS选择符兼容性
上传于||文档简介
&&c​s​s​对​浏​览​器​的​兼​容​性​问​题
阅读已结束，如果下载本文需要使用2下载券
想免费下载本文？
你可能喜欢相关内容：
CSS3 伪类选择符 E:last-child
说明：本文档兼容性测试基础环境为：windows系统；IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51
E:last-child{ sRules }
匹配父元素的最后一个子元素E。
要使该属性生效，E对象必须是某个对象的子元素。
浅绿 = 支持
红色 = 不支持
墨绿 = 部分支持
橙色 = 实验性质
结构性伪类选择符 E:last-child_CSS参考手册_web前端开发参考手册系列
注意是li:last-child，而不是ul:last-child
结构性伪类选择符 E:last-child
结构性伪类选择符 E:last-child
结构性伪类选择符 E:last-child
结构性伪类选择符 E:last-childE:last-child ： {attribute}
相关伪类：
匹配父元素中最后一个E元素
Internet Explorer
(×)Firefox 2.0
(√)Chrome 1.0.x
(√)Opera 9.63
(√)Safari 3.1
(√)Firefox 3.0
(√)Chrome 2.0.x
(√)Safari 4Public beta
(√)Firefox 3.5
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&style type=&text/css&&
p:last-child {color:#FF0000;}
&title&结构性伪类 E:last-child&/title&
&div style="width:733 border: 1px solid #666; padding:5"&
&p&匹配父元素中最后一个E元素&/p&
&p&匹配父元素中最后一个E元素&/p&
&p&匹配父元素中最后一个E元素&/p&
&p&匹配父元素中最后一个E元素&/p&
&p&匹配父元素中最后一个E元素&/p&
&p&匹配父元素中最后一个E元素&/p&

我要回帖

更多关于 firstchild兼容性 的文章

 

随机推荐