让IE7/8使用CSS中first-child和last-child样式属性

项目最终效果如下图所示:

可以看出2个tab之间有一天分割线,这条分割线没有使用单独的div或者span。而是使用li标签的border-right。但是最后一个需要隐藏,否则效果不是很理想。

最原始的写法是:

   1:  #tabnav li:last-child
   2:  {
   3:  border-right:none;
   4:  }

在常用的浏览器中测试都通过了。但是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:none;
}
<!-- .csharpcode, .csharpcode pre { 	font-size: small; 	color: black; 	font-family: consolas, "Courier New", courier, monospace; 	background-color: #ffffff; 	/*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt  { 	background-color: #f4f4f4; 	width: 100%; 	margin: 0em; } .csharpcode .lnum { color: #606060; } --><!-- .csharpcode, .csharpcode pre { 	font-size: small; 	color: black; 	font-family: consolas, "Courier New", courier, monospace; 	background-color: #ffffff; 	/*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt  { 	background-color: #f4f4f4; 	width: 100%; 	margin: 0em; } .csharpcode .lnum { color: #606060; } --><!-- .csharpcode, .csharpcode pre { 	font-size: small; 	color: black; 	font-family: consolas, "Courier New", courier, monospace; 	background-color: #ffffff; 	/*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt  { 	background-color: #f4f4f4; 	width: 100%; 	margin: 0em; } .csharpcode .lnum { color: #606060; } -->

这样当然不是最好的做法。但是我们有时需要转变思路,这样有时可以达到事半功倍的效果。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏专业duilib使用+业余界面开发

duilib的Combo控件滚动条不显示的问题

2944
来自专栏我爱编程

PyCharm

1704
来自专栏smy

谷歌调试工具选取元素选择不到页面的具体元素问题

z-index的问题 document的默认值是0. 一旦出现这种问题,检查下是否对大背景设置了z-index:-1; 如果设置了这个,那么所有的被设元素的内容...

2745
来自专栏GIS讲堂

Openlayers3中SVG图加载

鉴于SVG的优势,在图层展示的时候,会想到SVG的方式,但是OL3里面只支持ImageStatic的方式加载,也就是只能加载栅格图片,为此,本文实现Openla...

1914
来自专栏coding

vue.js组件切换

912
来自专栏企鹅号快讯

关于响应式前端WEB

响应式 Web 设计 -Viewport什么是 Viewport? viewport 是用户网页的可视区域。 viewport 翻译为中文可以叫做"视区"。 手...

1997
来自专栏Android干货

小程序实践(九):返回到上一个界面并传值回去

常见需求,修改某个信息,需要调到一个新界面有个输入框去修改内容,修改之后,点击后退按钮,新的数据就返回更新了

1773
来自专栏无原型不设计

Mockplus组件样式库一键解决风格复用

在Mockplus3.3版本中,新增了组件样式库,可以快速复用组件风格,同时可以将组件风格保存到库中。

24210
来自专栏coding

transition-group实现动画效果

如果要实现动画效果的元素是通过v-for循环渲染出来的,就不能使用transition,应该用transition-group将元素包裹

841
来自专栏流柯技术学院

selenium切换窗口后定位元素出现问题的解决方案

在做UI自动化的过程中,有时需要由一个窗口跳转到另一个窗口,这时直接去定位页面元素,可能会出现问题,这时,我们需要将driver与新的窗口进行绑定。

7242

扫码关注云+社区

领取腾讯云代金券