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

【问题标题】：Applying Style to last li in a ul with CSS / Jquery使用 CSS / Jquery 将样式应用于 ul 中的最后一个 li
【发布时间】：2009-06-05 14:44:25
【问题描述】：

给定以下 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-of。

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

【问题讨论】：

感谢 Paolo....甚至没有注意到 html 丢失了

标签： jquery css css-selectors

【解决方案1】：

为什么<li> 中有一个<div>？没有那个是完全可能的。

无论如何，这就是使用 jQuery 的方法：

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

【讨论】：

好问题可能不需要它，我需要背景颜色，因为列表中的不同事物具有不同的颜色背景。当我把背景放在 li 上时，我认为它不起作用，但现在我想这可能是一个不相关的问题
我喜欢你添加类的方法，因为这不需要我更改我的标记。再次感谢您的帮助
请确保您了解 jquery 中 :last-child 和 :last 之间的区别。从他们的文档中： :last-child 匹配作为其父级最后一个子级的所有元素。虽然 :last 只匹配一个元素，但它匹配多个元素：每个父元素一个。
@Scott：我想这就是期望的行为。如果您有多个 UL，您可能希望在每个最后一个孩子上设置边框。不过，感谢您的注意。

【解决方案2】：

:last-child 是 CSS3，与 CSS2 中引入的 :first-child 不同，同时不支持 IE。我相信以下是使用 jquery 实现它的最安全的方法

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

:last-child 在 IE7 中不起作用（在 IE8 上不确定），因此您必须使用 jQuery 路由。您的 css 排列方式与选择器在 jQuery 中的工作方式几乎相同：

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

【讨论】：

【解决方案5】：

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

ul > li:last-child {

我在 chrome、ie8、firefox 和 safari 中对其进行了测试并为我工作。

【讨论】：

last-child 不能在 IE7 上工作....不记得为什么我有一个 div ......已经很久了

【解决方案6】：

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

【讨论】：