CSS ul li 最后一个

在本文中，我们将介绍CSS中如何选中ul中的最后一个li元素。这个技巧在网页设计中非常实用，可以使得我们在样式上更加灵活。

首先，让我们来回顾一下CSS选择器中的伪类。在CSS中，伪类是指用来选择元素的一类特殊选择器，它们不是根据属性或者标签名称来选择元素，而是根据元素的状态或者其所处的文档树的位置来选择元素。

其中，为我们所熟知的一些伪类：:hover、:active、:visited、:focus、:first-child、:last-child。

那么，如何选中ul中的最后一个li元素，也就是倒数第二个元素呢？我们可以使用:last-child伪类来实现。但是它有一个局限性，即：只选择最后一个子元素。如果我们想要选择倒数第二个元素，该怎么办呢？

阅读更多：CSS 教程

CSS中选择最后一个元素

CSS3引入了更为强大的伪类选择器:last-of-type。这个伪类选择器只匹配具有相同标签名称的最后一个子元素，它不关心元素的类别。

下面是一个例子，假设我们有一个UL列表，它包含三个ListItem元素：

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

我们可以使用下面的CSS样式，来选中最后一个li元素，也就是List item 3：

li:last-of-type {
    /* styles */
}

这个样式规则会选择ul列表内的最后一个li元素List item 3。

CSS中选中倒数第二个元素

回到最初的问题：如果我们想要选中ul中的倒数第二个元素该怎么办？

因为:last-of-type伪类是选择最后一个类型为指定元素的子元素，我们无法直接使用它来选择倒数第二个元素。但是，我们可以使用:not()伪类来排除最后一个li元素的选择，就能够选择倒数第二个元素了。具体方法如下：

li:not(:last-of-type):last-child {
    /* styles */
}

这个样式规则会选择ul列表内除了最后一个li元素以外，最后一个li元素之前的那个元素。

示例

下面我们来看一个具体的示例。假设我们有一个这样的HTML结构，我们想要选中ul中的倒数第二个li元素：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

我们可以使用下面的CSS样式，来选中倒数第二个li元素，也就是Item 4：

li:not(:last-of-type):last-child {
  color: red;
}

总结

使用:last-of-type和:not()伪类，我们可以选择倒数第二个元素。这是CSS中一个非常有用的技巧，可以让我们在样式上更加灵活。