在IE中用javascript配合使用first-child伪类

yibin 2015-02-09 建站源码 664

  制作符合web标准的网页,经常需要定义某个父元素下的第一个子(child)元素或最后一个元素,以便将其与其他元素区分开来,有利于实现某些非凡需求。最浅显的例子是,导航项目间的竖线,我们往往通过border或者background来实现。非凡需求是,第一项左边无竖线或最后一项右边无竖线。

  那么区分第一项好呢,还是最后一项好?答案是明显的,逼不得已,不要用区别最后一项。按照一般的编程方法,控制第一项要比控制最后一项轻易得多。

  区分第一项的还有一个好处是,CSS有一个:first-child的伪元素(pseudo element)可以让我们轻而易举的选择第一个子元素。

  遗憾的是,当前全球占有率最高的浏览器,IE6,并不支持这个伪元素。我们可以手工给第一个元素加上class然后再定义它。但这不是一个万无一失的办法,尤其对于页面规模达到一定数量大型网站,很轻易挂一漏万。那么,让JavaScript来帮我们完成这件工作如何?

  查看演示效果

代码调试框 [www.dedecms.com]


[ 可先修改部分代码 再运行查看效果 ]
  在IE中,为每个属于first-child的li加上first-child的class,则CSS则可以这样书写了::first-child, .first-child { some rules here...}(有没有发现这样写很帅,一个是冒号,两点;一个是点号,一点 ),十分便于维护和治理。

  希望哪位高手能够写出通用的first-child来,我这里的例子只针对li,能力有限!
  本文作者:Realazy

扫码添加微信

13013082126 扫描微信 建站咨询 优化咨询