html更改li英文字母,html-更改最后一个<li>的CSS

html-更改最后一个

的CSS

我想知道是否有某种方法可以使用CSS来更改列表中最后li的CSS属性。 我已经研究过使用:last-child，但这似乎确实有问题，我无法为我工作。 如有必要，我将使用JavaScript进行此操作，但是我想知道是否有人可以考虑使用CSS解决方案。

10个解决方案

99 votes

last-child实际上是不修改HTML的唯一方法-但假设您可以这样做，主要的选择就是给它class="last-item"，然后执行以下操作：

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

显然，您可以使用您选择的动态页面生成语言来自动执行此操作。 另外，W3C DOM中有last-child JavaScript属性。

这是在原型中执行所需操作的示例：

$$("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实现-因此，它应减少错误，并在各个浏览器之间更可靠。

Lucas Jones answered 2019-09-24T08:35:22Z

47 votes

我已经使用纯CSS做到了这一点(可能是因为我来自未来-比其他所有人晚了三年：P)

假设我们有一个列表：

• Category 1
• Category 2
• Category 3

然后，我们可以轻松地将最后一项的文本设为红色：

ul#nav li:last-child span {

color: Red;

}

pano answered 2019-09-24T08:36:02Z

11 votes

我通常将CSS和JavaScript方法结合在一起，以便它在所有浏览器(但不是IE6 / 7)中都不需要JavaScript，并且在IE6 / 7中打开(但不关闭)JavaScript，因为它们不支持:last-child伪类。

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

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

answered 2019-09-24T08:36:27Z

9 votes

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

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

Keith Adler answered 2019-09-24T08:36:52Z

6 votes

IE7 +和其他浏览器的一种替代方法是改用:first-child，然后反转样式。

例如，如果要在每个:first-child上设置边距：

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越野车，但仅限于它将选择一些根元素(doctype或html)的情况，并且如果插入其他元素，则可能不会更改样式。

DisgruntledGoat answered 2019-09-24T08:37:44Z

4 votes

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

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

mikemaccana answered 2019-09-24T08:38:09Z

3 votes

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

function initializeBehaviours() {

this.lastChild.className += ' last-child';

}

并使用以下命令从我的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库。

vise answered 2019-09-24T08:39:01Z

2 votes

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

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

Lawrence answered 2019-09-24T08:39:27Z

2 votes

$('礼')最后()addClass('SomeClass的')。;

如果你有多个

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

jaeson answered 2019-09-24T08:40:04Z

0 votes

例如，如果您知道要查看的列表中有三个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选择器获得更好的支持。

strager answered 2019-09-24T08:40:45Z