适用于Internet Explorer的Lastchild

时间:2011-09-29 11:45:40

标签: jquery internet-explorer css-selectors

我知道有一些方法可以让“lastchild”为Internet Explorer工作。 CSS似乎没有那么好用。 我读到了一个jQuery版本,但我不确定该怎么做。

我只需要这个,因为我使用带有border-top和border-bottom的列表样式来创建“阴影效果”。

这是my website。 顶部导航菜单在javascript fild中有一个lastchild定义,但似乎没有采取适当的效果:

jQuery("ul.menu li:last-child").addClass("last-child");
jQuery("ul.menu li:first-child").addClass("first-child");

原始的CSS就是这样的,但这也在Firefox中左右显示了边框!:

.jqueryslidemenu ul li.first-child a{border-left:none}
.jqueryslidemenu ul.sub-menu li.first-child a{border-left:1px solid #444444!important}
.jqueryslidemenu ul li.last-child a{border-right:none}
.jqueryslidemenu ul.sub-menu li.last-child a{border-right:1px solid #444444!important}
/*IE6 hack to get sub menu links to behave correctly*/
* html .jqueryslidemenu ul li a{display: inline-block;}

我把它改成了,现在右边框只显示在IE!中:

.jqueryslidemenu ul li:first-child a{border-left:none;}
.jqueryslidemenu ul.sub-menu li.first-child a{border-left:1px solid #444444!important;}
.jqueryslidemenu ul li:last-child a{border-right:none;}
.jqueryslidemenu ul.sub-menu li.last-child a{border-right:1px solid #444444!important;}
/*IE6 hack to get sub menu links to behave correctly*/
* html .jqueryslidemenu ul li a{display: inline-block;}

1 个答案:

答案 0 :(得分:1)

使用.children().last().css()

以编程方式设置CSS

或者,如果您在布局时(在后端)知道哪个元素是这样,则向其中添加last类。