如何使用 CSS 正确选择第一个和最后一个子元素？-css教程-PHP中文网

如何使用 CSS 正确选择第一个和最后一个子元素？

Patricia Arquette

发布： 2024-12-03 22:42:12

原创

738 人浏览过

How Can I Properly Select First and Last Child Elements with CSS?

解决选择第一个和最后一个子元素时的 CSS 问题

当在使用 CSS 选择第一个和最后一个子元素时遇到困难时，必须考虑上下文你的代码。在提供的 Fiddle 中，.area 元素是

的直接子元素。标签。但是，要正确应用 :first-child 和 :last-child 伪类，确保 .area 元素嵌套在容器中至关重要。

要解决此问题，请在周围添加容器元素您的 .area 元素。这将提供一个适当的上下文，根据第一个和最后一个子元素在容器中的位置来识别它们。

这是代码的修订版本：

.container {
  display: flex;
}

.area {
  height: 100px;
  width: 100px;
}

.area:first-child {
  background-color: red;
}

.area:last-child {
  background-color: green;
}

登录后复制

<div class="container">
  <div class="area">1</div>
  <div class="area">2</div>
  <div class="area">3</div>
  <div class="area">4</div>
</div>

登录后复制

通过将 .area 元素嵌套在 .container 中，您可以建立清晰的层次结构。 :first-child 和 :last-child 伪类现在可以准确定位 .container 的第一个和最后一个子元素。

以上是如何使用 CSS 正确选择第一个和最后一个子元素？的详细内容。更多信息请关注PHP中文网其他相关文章！