如何使用 CSS 选择元素的所有子元素（除了最后一个子元素）？

原创

ithorizon 6个月前 (10-19) 阅读数 60 #CSS

CSS 是一种常用的网页样式。在开发网络应用程序时，我们有时需要对不同的元素应用不同的样式。这个常见的要求是选择一个元素的所有子元素，除了最后一个子元素！应用 CSS 可以选择元素的所有子元素（除了最后一个子元素）。

在本文中，我们将了解如何使用不同的方法在 CSS 中选择除最后一个子元素之外的所有子元素。我们将详细讨论每种方法及其语法，以及帮助您理解它们如何工作的示例。

第一种选择除最后一个之外的所有子元素的方法涉及使用 :not() 选择器，它允许您选择与特定选择器不匹配的所有元素。第二种方法涉及使用 :nth-last-child() 选择器，它选择从父元素末尾算起的第 n 个子元素的所有元素。在此方法中，我们指定 n+2 参数，该参数有助于选择元素的所有子元素（HTML 中最后一个子元素除外）。

这两种方法在开发 Web 应用程序时都非常有用，它们可能有助于实现网页所需的 UI。使用上面讨论的选择器可以帮助我们了解这些选择器是如何工作的，并且我们可以为我们的网页创建功能和 UI 的自定义样式。

立即学习“前端免费学习笔记（深入）”；

方法 1：使用 :not 选择器

- not 选择器是一个功能强大的 CSS 选择器，它允许您选择除匹配特定条件的元素之外的所有元素。要选择除最后一个子元素之外的所有子元素，我们可以将 :not 选择器与 :last-child 选择器结合使用。

要使用 - not() 选择器选择元素的所有子元素（最后一个子元素除外），我们将其与 :last-child 选择器一起使用。 :last-child 选择器有助于选择元素的最后一个子元素。通过对两个选择器使用这种方法的组合，我们可以选择元素的所有子元素，除了最后一个子元素。

下面是如何使用 :not() 选择器选择父元素的所有子元素（最后一个子元素除外）的语法 -

语法

在下面的语法中，.parent 是父元素的选择器，> 选择其所有直接子元素，* 选择所有子元素，:not(:last-child) 从选择中排除最后一个子元素。

.parent > *:not(:last-child) {
  /* styles for all children except the last one */
}

示例

在此示例中，CSS 选择器 .parent > *:not(:last-child) 选择 .parent 类元素的所有直接子元素（即 h1、h2、p 和 span 元素），除了最后一个子元素，即元素。使用 CSS，我们将“color”属性应用于 .parent 元素的前三个子元素（即 h1、h2 和 p 元素），而第四个子元素（即元素）不会受到影响。

现在让我们看看如何将 CSS 代码应用到 HTML 页面的代码 -

<!DOCTYPE html>
<html >
   <head>
      <style>
         .parent > *:not(:last-child) {
            color: green;
         }
      </style>
   </head>
   <body>
      <div class="parent">
         <h1>First Child</h1>
         <h2>Second Child</h2>
         <p>Third Child</p>
         <span>Fourth Child</span>
      </div>
   </body>
</html>

方法 2：使用:nth-last-child() 选择器

- nth-last-child() 选择器是 CSS 中的另一个有用工具，它允许您根据元素在元素子元素列表中的位置来选择元素。我们可以使用它来选择除最后一个之外的所有子项，方法是使用 :nth-last-child(n+2) 选择除最后一个子项之外的所有子项。

要使用 :nth-last-child() 选择器选择除最后一个子元素之外的所有子元素，我们可以指定 n+2 参数。定义的参数使用 CSS 选择 HTML 的所有元素，最后一个子元素除外，它是倒数第一个子元素。

下面是如何使用 :nth-last-child() 选择器选择父元素的所有子元素（最后一个子元素除外）的语法 -

语法

在下面的语法中，.parent 是父元素的选择器，> 选择其所有直接子元素，* 选择所有子元素，:nth-last-child(n+2) 选择除最后一个之外的所有子元素孩子。

.parent > *:nth-last-child(n+2) {
   /* styles for all children except the last one */
}

示例

在此示例中，CSS 选择器 .parent > *:nth-last-child(n+2) 选择 .parent 类元素的所有直接子元素，最后一个子元素除外。在这里，.parent 元素内的所有按钮元素都将被选择，但不会选择最后一个按钮元素。

多个 CSS 属性已应用于前三个按钮，但 CSS 样式不会添加到最后一个子按钮。

现在让我们看看如何将 CSS 代码应用到 HTML 页面的代码 -

<!DOCTYPE html>
<html >
   <head>
      <style>
         .parent > *:nth-last-child(n+2) {
            background-color: green;
            padding: 10px;
            color: white;
            border-radius: 10px;
            width: 10em;
            text-decoration: none;
            font-family: sans-serif;
            border: none;
         }
      </style>
   </head>
   <body>
      <div class="parent">
      <button>First</button>
      <button>Second</button>
      <button>Third</button>
      <button>Fourth</button>
   </div>
   </body>
</html>

结论

在本文中，我们了解了如何使用不同的方法选择元素的所有子元素（除了最后一个子元素）。在 CSS 选择器的帮助下，选择子项是一个轻松的过程，因为它提供了多个可用于执行此任务的选择器，例如 :not() 选择器和 :nth-last-child() 选择器。上面讨论的两个示例都展示了 CSS 在将不同样式应用于元素的所有子元素（最后一个元素除外）方面的作用。这两个选择器都可以帮助我们轻松地将不同的 CSS 样式应用于不同的 HTML 元素，不仅如此，它还有助于轻松创建动态网站。

以上就是如何使用 CSS 选择元素的所有子元素（除了最后一个子元素）？的详细内容，更多请关注IT视界其它相关文章！