使用CSS / Jquery将样式应用于ul中的最后一个li

Given the following HTML:

给出以下HTML:

<ul>
   <li><div>Some content</div></li>
   <li><div>some more content</div></li>
   <li><div>final content</div></li>
</ul>

I would like to apply a top border around each div. On the last div I would like to put a bottom border. I am targeting IE7/8. I have the top border working fine, I need help getting the bottom border.

我想在每个div周围应用顶部边框。在最后一个div我想放一个底边。我的目标是IE7 / 8。我的顶部边框工作正常,我需要帮助获得底部边框。

I've tried:

   ul > li:last-child > div
    {
        border-bottom: solid 1px black;
    }

I've also tried using last-type-of.

我也尝试过使用last-type-of。

I am looking for a CSS solution and a Jquery solution

我正在寻找一个CSS解决方案和一个Jquery解决方案

6 个解决方案

#1

Why do you have a <div> inside the <li>? Completely possible without that.

你为什么在

里面有一个

?完全可能没有它。

Anyways, this is how to do it with jQuery:

无论如何,这是如何使用jQuery:

$('ul > li:last-child > div').css('border-bottom','1px solid black');

#2

:last-child is CSS3, unlike :first-child which was introduced in CSS2, and has no IE support while. I believe the following is the safest way to implement it using jquery

:last-child是CSS3,不像:在CSS2中引入的first-child,并且没有IE支持。我相信以下是使用jquery实现它的最安全的方法

$('li').last().addClass('someClass');

#3

Here's a CSS only solution:

这是一个仅限CSS的解决方案:

Apply the bottom border to the ul. To make it work cross-browser, remove the padding from the ul and bump the list over with a margin.

将底部边框应用于ul。要使其跨浏览器工作,请从ul中删除填充并使用边距将列表翻转。

ul.border {border-bottom:1px solid #000;padding:0;margin-left:40px;}
ul.border li {border-top:1px solid #000;}

<ul class="border">
   <li>Some content</li>
   <li>some more content</li>
   <li>final content</li>
</ul>

#4

:last-child doesn't work in IE7 (not sure on IE8), so you'll have to do the jQuery route. Your css lines up pretty much the same way the selectors would work in jQuery:

:last-child在IE7中不起作用(在IE8上不确定),所以你必须做jQuery路由。你的css排序方式与选择器在jQuery中的工作方式非常相似:

$('ul > li:last > div').addClass('someclass');

#5

I am not sure why do you need the "<div>" inside the "<li>" but if you don't need it you could simply use:

我不知道为什么你需要“

”中的“

”,但如果你不需要它,你可以简单地使用:

ul > li:last-child {

I tested it and work for me in chrome, ie8, firefox and safari.

我测试了它并在chrome,ie8,firefox和safari中为我工作。

#6

$("#yourUL li:last div").css({'border-bottom':'solid 1px black'});

#1