CSS 最后一个li

在前端开发中，经常会遇到需要对页面中的元素进行样式设置的情况。CSS（层叠样式表）是一种用于描述Web页面外观的语言，它能够为HTML文档添加样式和布局。在CSS中，我们可以通过选择器来选择特定的元素，并为其应用样式。

本文将重点探讨如何使用CSS选择器来选择并应用样式到列表（<li>）元素中的最后一个元素。

了解CSS选择器

在开始讨论如何选择最后一个<li>元素之前，我们需要先了解一些关于CSS选择器的基础知识。CSS选择器是用于选择HTML元素的模式。常见的选择器有以下几种：

元素选择器：选择文档中所有指定类型的元素。例如，p选择器将选择所有的<p>元素。
id选择器：选择指定id属性的元素。例如，#myId选择器将选择具有id="myId"的元素。
类选择器：选择具有指定类名的元素。例如，.myClass选择器将选择具有class="myClass"的元素。

选择最后一个li

在CSS中，我们可以使用伪类选择器:last-child来选择最后一个元素。在列表中，我们可以使用这个伪类选择器来选取最后一个<li>元素。

考虑以下示例代码：

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

要选择最后一个<li>元素并应用样式，我们可以使用以下CSS规则：

li:last-child {
  /* 在这里添加你的样式 */
}

你可以将所需的样式添加到上述CSS规则的花括号内。例如，如果我们想要将最后一个<li>元素的文本颜色设置为红色，可以这样做：

li:last-child {
  color: red;
}

示例代码运行结果

以下是一个展示了如何选择最后一个<li>元素并应用样式的完整示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    li:last-child {
      color: red;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</body>
</html>

运行以上代码，你将看到最后一个<li>元素的文本变为红色，并加粗显示。