CSS: 行中的最后一个元素

在本文中，我们将介绍如何使用CSS选择器来选择行中的最后一个元素，并对其进行样式设置。

阅读更多：CSS 教程

CSS选择器

CSS选择器是一种在HTML文档中选择指定元素或元素组的方法。常见的CSS选择器有标签选择器、类选择器、ID选择器等。通过使用合适的选择器，我们可以对特定的元素应用样式。

:last-child 伪类选择器

CSS的:last-child伪类选择器可用于选取某个元素在其父元素中的最后一个子元素。其语法为：element:last-child。

例如，我们有如下的HTML代码：

<div class="container">
   <div>第一个元素</div>
   <div>第二个元素</div>
   <div>第三个元素</div>
   <div>最后一个元素</div>
</div>

我们想要对最后一个元素应用样式，可以使用:last-child选择器：

.container div:last-child {
   /* 在这里编写样式 */
   color: red;
   font-weight: bold;
}

这样，最后一个元素将会变成红色，并加粗显示。

示例

下面我们通过一个示例来进一步说明如何使用:last-child选择器。

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: lightgray;
  margin-bottom: 10px;
}

.container div:last-child {
  background-color: blue;
}
</style>
</head>
<body>

<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

</body>
</html>

上述代码中，我们定义了一个容器，里面包含了多个相同大小的div元素，并设置了上下间距为10像素。通过设置.container div:last-child的背景颜色为蓝色，可以看到每个容器中最后一个div元素的背景颜色都变为了蓝色。