专栏首页快乐八哥让IE7/8使用CSS中first-child和last-child样式属性

让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 条评论
登录 后参与评论

相关文章

  • jQuery Tools Scrollable使用的限制

    在现在很多项目中,都会使用到jQuery Tools中scrollable。特别对于显示Photo Gallery,当然目前国内国外都有第三方非常优秀的的类似j...

    八哥
  • Javascript对象的方法赋值

    Javascript对象编程学习中,一直不能很好的掌握对象的属性(property)和方法(method)。今天在写代码过程中,又犯了一个低级错误。 <!DOC...

    八哥
  • 自定义的html radio button的样式

    设计要求效果如下: ? <!-- .csharpcode, .csharpcode pre { font-size: small; color: black...

    八哥
  • 《CLR via C#》Part2之Chapter5 基元类型、引用类型和值类型(一)

    通过学习了解基元类型、引用类型和值类型的区别,希望让coder能避免引用一些不易察觉的bug,并提高性能。

    Isaac Zhang
  • Javascript对象的方法赋值

    Javascript对象编程学习中,一直不能很好的掌握对象的属性(property)和方法(method)。今天在写代码过程中,又犯了一个低级错误。 <!DOC...

    八哥
  • 如何开发YUI3的扩展

    YUI是Yahoo发布的一个JS框架,虽然不如jQuery简单,但是如果你是要做一些复杂的事情的时候,有一个合适量级的框架还是能有用不少。

    大江小浪
  • DIV元素水平和垂直居中

    在前端开发过程中,经常要对元素进行居中设置。一般有水平居中,和垂直居中。一般设置水平居中简单。基本是margin:0 auto,就可以了。但是垂直居中,我们有时...

    八哥
  • 使用Ansible playbooks快速构建etcd集群

    本篇文章记录一下使用ansible-playbooks进行快速构建一个可用的etcd集群。在阅读并实践本文章之前,请确保您有一个可用的ansible环境。 一...

    BGBiao
  • m6A RNA甲基化修饰特征

    前面给大家简单的介绍过RNA甲基化以及RNA m6A修饰发文套路大揭秘,今天我们就来看看,m6A RNA甲基化修饰有哪些典型的特征。

    用户7627119
  • 腾讯WeTest为Unity开发者打造免费自动化测试框架——20个体验资格免费发放

    测试开发者的共同关注! 关于GAutomator 为了保证线上游戏品质,保障玩家的游戏体验,上线前的测试工作是游戏开发的重要一环。要做好测试工作,往往需要重...

    WeTest质量开放平台团队

扫码关注云+社区

领取腾讯云代金券