htmlcssli第二个,html为最后的li更改CSS

html - 为最后的

我想知道是否有一些方法可以使用CSS更改列表中最后一个li的CSS属性。 我已经研究过使用:last-child&＃xff0c;但这看起来真的很麻烦&＃xff0c;我无法让它为我工作。 如有必要&＃xff0c;我将使用Javascript来执行此操作&＃xff0c;但我想知道是否有人可以在CSS中考虑解决方案。

10个解决方案

98 votes

last-child实际上是唯一一种不修改HTML的方法 - 但假设你能做到这一点&＃xff0c;主要选择就是给它一个class&＃61;"last-item"&＃xff0c;然后做&＃xff1a;

li.last-item { /* ... */ }

显然&＃xff0c;您可以使用您选择的动态页面生成语言自动执行此操作。 此外&＃xff0c;W3C DOM中还有一个last-child Javascript属性。

这是一个在Prototype中做你想做的事情的例子&＃xff1a;

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

甚至更简单&＃xff1a;

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

在jQuery中&＃xff0c;您可以更紧凑地编写它&＃xff1a;

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

另请注意&＃xff0c;这应该可以在不使用实际的last-child CSS选择器的情况下工作 - 而是使用它的Javascript实现 - 因此它应该在整个浏览器中减少错误并且更可靠。

Lucas Jones answered 2019-06-09T20:38:41Z

46 votes

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

假设我们有一个清单&＃xff1a;

• Category 1
• Category 2
• Category 3

然后我们可以轻松地将最后一项的文本设为红色&＃xff1a;

ul#nav li:last-child span {

color: Red;

}

pano answered 2019-06-09T20:39:19Z

11 votes

我通常将CSS和Javascript方法结合起来&＃xff0c;因此它在所有浏览器中都可以在没有Javascript的情况下运行&＃xff0c;但是在IE6 / 7和IE6 / 7中使用Javascript(但不是关闭)&＃xff0c;因为它们不支持:last-child伪类。

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

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

answered 2019-06-09T20:39:44Z

9 votes

您可以使用jQuery并以这种方式执行

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

Keith Adler answered 2019-06-09T20:40:08Z

5 votes

IE7 &＃43;和其他浏览器的一种替代方法可能是使用:first-child&＃xff0c;并反转您的样式。

例如&＃xff0c;如果您在每个:first-child上设置保证金&＃xff1a;

ul li {

margin-bottom: 1em;

}

ul li:last-child {

margin-bottom: 0;

}

你可以用这个替换它&＃xff1a;

ul li {

margin-top: 1em;

}

ul li:first-child {

margin-top: 0;

}

这适用于其他一些情况&＃xff0c;如边框。

根据sitepoint&＃xff0c;:first-child越野车&＃xff0c;但仅限于它将选择一些根元素(doctype或html)&＃xff0c;并且如果插入其他元素&＃xff0c;则可能不会更改样式。

DisgruntledGoat answered 2019-06-09T20:41:00Z

3 votes

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

function initializeBehaviours() {

this.lastChild.className &＃43;&＃61; &＃39; last-child&＃39;;

}

并从我的IE条件css文件中调用它&＃xff1a;

ul { behavior: url("/Javascripts/htc/last-child.htc"); }

在我的主要css文件中&＃xff0c;我得到了&＃xff1a;

ul li:last-child,

ul li.last-child {

/* some code */

}

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

vise answered 2019-06-09T20:41:52Z

3 votes

2015答案&＃xff1a;CSS last-of-type允许您设置最后一个项目的样式。

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

mikemaccana answered 2019-06-09T20:42:17Z

2 votes

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

$(&＃39;li&＃39;).last().addClass(&＃39;someClass&＃39;);

Lawrence answered 2019-06-09T20:42:42Z

2 votes

$(&＃39;礼&＃39;)最后()addClass(&＃39;SomeClass的&＃39;)。;

如果你有多个

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

jaeson answered 2019-06-09T20:43:19Z

0 votes

如果你知道你正在查看列表中有三个li&＃xff0c;例如&＃xff0c;你可以这样做&＃xff1a;

li &＃43; li &＃43; li { /* Selects third to last li */

}

在IE6中&＃xff0c;您可以使用表达式&＃xff1a;

li {

color: expression(this.previousSibling ? &＃39;red&＃39; : &＃39;green&＃39;); /* &＃39;green&＃39; if last child */

}

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

strager answered 2019-06-09T20:44:01Z