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

百变鹏仔 3个月前 (09-19) #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 选择元素的所有子元素（除了最后一个子元素）？

方法 1：使用 :not 选择器

语法

示例

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

语法

示例

结论

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写