Question

给出以下HTML：

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

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

我试过了：

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

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

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

Answer 1

为什么<div>内有<li>？完全可能没有它。

无论如何，这是如何用jQuery做的：

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

Answer 2

：last-child 是CSS3，与CSS2中引入的：first-child 不同，并且没有IE支持。我相信以下是使用jquery

实现它的最安全的方法

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

Answer 3

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

将底部边框应用于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>

Answer 4

:last-child在IE7中不起作用（在IE8上不确定），因此您必须执行jQuery路由。你的css排序方式与选择器在jQuery中的工作方式非常相似：

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

Answer 5

我不确定为什么你需要“<div>”中的“<li>”，但如果你不需要它，你可以简单地使用：

ul > li:last-child {

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

Answer 6

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

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

6 个答案: