更改最后一个 <li> 的 CSS

Posted

技术标签:

【中文标题】更改最后一个 <li> 的 CSS【英文标题】:Changing CSS for last <li> 【发布时间】:2010-11-22 17:23:17 【问题描述】:

我想知道是否有某种方法可以使用 CSS 更改列表中最后一个 li 的 CSS 属性。我已经研究过使用:last-child,但这似乎真的有问题,我无法让它为我工作。如有必要,我将使用 javascript 来执行此操作,但我想知道是否有人可以在 CSS 中想出一个解决方案。

【问题讨论】:

我很好奇:你为什么需要这个? 您好,strager:我正在制作一个导航栏,并希望最后一个元素的属性与其余元素不同。 【参考方案1】:

2015 年答案:CSS last-of-type 允许您设置最后一项的样式。

ul li:last-of-type  color: red; 

【讨论】:

【参考方案2】:

您可以使用jQuery 并这样做

$("li:last-child").addClass("someClass");

【讨论】:

【参考方案3】:

我用纯 CSS 完成了这个(可能是因为我来自未来 - 比其他人晚 3 年:P)

假设我们有一个列表:

<ul id="nav">
  <li><span>Category 1</span></li>
  <li><span>Category 2</span></li>
  <li><span>Category 3</span></li>
</ul>

那么我们可以很容易地把最后一项的文字变成红色:

ul#nav li:last-child span 
   color: Red;

【讨论】:

迄今为止最干净的解决方案(如果明显支持)。 选择器的作用是“ul#nav li:last-child span”有效,而“#nav li:last-child span”无效。虽然从技术上讲两者都指向同一个元素,但第一个更具体。向“来自未来的人”致敬 +1 表示“来自未来的人” ;) - 虽然严格来说,两年后你是过去的人:P 但是因为他是在 2 年前写的,并不意味着他不是来自未来,而是来自未来有过去的人 :)【参考方案4】:

:last-child 确实是不修改 html 的唯一方法 - 但假设您可以这样做,主要选择就是给它一个 class="last-item",然后这样做:

li.last-item  /* ... */ 

显然,您可以使用您选择的动态页面生成语言自动执行此操作。此外,W3C DOM 中有一个 lastChild JavaScript 属性。

这是一个在Prototype 中做你想做的事的例子:

$$("ul").each(function(x)  $(x.lastChild).addClassName("last-item"); );

或者更简单:

$$("ul li:last-child").each(function(x)  x.addClassName("last-item"); );

jQuery,你可以写得更简洁:

$("ul li:last-child").addClass("last-item");

另外请注意,这个应该在不使用实际的 last-child CSS 选择器的情况下工作 - 而是使用它的 JavaScript 实现 - 所以它应该更少错误并且跨浏览器更可靠。

【讨论】:

很高兴您在我发布后将我的答案合并到您的答案中。 抱歉 - 我正在发布与我已经发布的原型代码等效的 JQuery。如果您愿意,我可以编辑 JQuery 部分。 没问题。我实际上是说它至少验证了我如何做到这一点。 再次抱歉造成误会:)。从技术上讲,您的代码要好 10 倍 - 它确实有效! (错字将在 10..9.. 中修复) jQuery 确实让浏览器处理选择,如果它理解 :last-child【参考方案5】:

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

如果你有多个

组 它只会选择最后一个 li。

【讨论】:

【参考方案6】:

:last-child 是 CSS3 并且没有 IE 支持而 :first-child 是 CSS2,我相信以下是使用 jquery 实现它的安全方法

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

【讨论】:

【参考方案7】:

我通常将 CSS 和 JavaScript 方法结合起来,以便它在除 IE6/7 之外的所有浏览器中无需 JavaScript 即可工作,并且在 IE6/7 中打开(但不是关闭)JavaScript,因为它们不支持 :last-child 伪类。

$("li:last-child").addClass("last-child");

li:last-child,li.last-child /* ... */ 

【讨论】:

只是一个小修正, :last-child 在 IE7 上也不起作用。【参考方案8】:

IE7+ 和其他浏览器的一种替代方法可能是改用:first-child,并反转您的样式。

例如,如果您在每个li 上设置边距:

ul li 
  margin-bottom: 1em;

ul li:last-child 
  margin-bottom: 0;

你可以用这个替换它:

ul li 
  margin-top: 1em;

ul li:first-child 
  margin-top: 0;

这适用于边框等其他情况。

根据sitepoint、:first-child buggy,但仅限于选择一些根元素(doctype 或 html),如果插入其他元素,可能不会改变样式。

【讨论】:

【参考方案9】:

我通常通过创建一个 htc 文件(例如 last-child.htc)来做到这一点:

<attach event="ondocumentready" handler="initializeBehaviours" />
<script type="text/javascript">
function initializeBehaviours() 
  this.lastChild.className += ' last-child';

</script>

并从我的 IE 条件 css 文件中调用它:

ul behavior: url("/javascripts/htc/last-child.htc");

而在我的主 css 文件中,我得到了:

ul li:last-child,
ul li.last-child 
  /* some code */

另一个使用现有 css 标记而不定义任何 .last-child 类的解决方案(虽然速度较慢)是 Dean Edwards ie7.js 库。

【讨论】:

【参考方案10】:

如果您知道您正在查看的列表中有三个 li,例如,您可以这样做:

li + li + li  /* Selects third to last li */

在 IE6 中你可以使用表达式:

li 
    color: expression(this.previousSibling ? 'red' : 'green'); /* 'green' if last child */

不过,我建议使用专门的类或 Javascript(不是 IE6 表达式),直到 :last-child 选择器获得更好的支持。

【讨论】:

以上是关于更改最后一个 <li> 的 CSS的主要内容,如果未能解决你的问题,请参考以下文章

CSS解决ul下面最后一个li的margin

怎么用CSS选择ul里最后一个li里面的a元素

css多个第一个和最后一个动态

Jquery:滚动到最后一个 <li>

CSS last-child(-1)

用css 只控制第一个li的样式怎么控制?