如何使用 CSS 选择元素中除最后一个子元素之外的所有子元素?
CSS 是网页样式的常用方法。在开发 Web 应用程序时，我们有时需要将不同的样式应用于不同的元素。而这个常见的需求就是选择元素中除最后一个子元素之外的所有子元素!应用 CSS 可以选择元素中除最后一个子元素之外的所有子元素。
在本文中，我们将了解如何使用不同的方法在 CSS 中选择元素中除最后一个子元素之外的所有子元素。我们将详细讨论每种方法的语法，并提供示例来帮助您理解它们的工作原理。
第一种方法是使用 :not() 选择器来选择除最后一个子元素之外的所有子元素，它允许您选择所有不匹配特定选择器的元素。第二种方法是使用 :nth-last-child() 选择器，它选择从父元素末尾数第 n 个子元素的所有元素。在此方法中，我们指定了 n+2 参数，该参数用于选择元素中除最后一个子元素之外的所有子元素。
这两种方法在开发 Web 应用程序时都非常有用，它们可能有助于实现我们网页所需的 UI。使用上面讨论的选择器可以帮助我们了解这些选择器的工作原理，并且我们可以为网页创建兼具功能性和 UI 的自定义样式。
方法 1:使用 :not 选择器
− not 选择器是一个强大的 CSS 选择器，它允许您选择除满足特定条件的元素之外的所有元素。要选择元素中除最后一个子元素之外的所有子元素，我们可以将 :not 选择器与 :last-child 选择器结合使用。
要使用 − not() 选择器选择元素中除最后一个子元素之外的所有子元素，我们可以将其与 :last-child 选择器结合使用。 :last-child 选择器用于选择元素的最后一个子元素。通过结合使用这两种选择器的方法，我们可以选择元素中除最后一个子元素之外的所有子元素。
以下是使用 :not() 选择器选择父元素除最后一个子元素之外的所有子元素的语法 -
语法
在以下语法中，.parent 是父元素的选择器，> 选择其所有直属子元素，* 选择所有子元素，而 :not(:last-child) 将最后一个子元素排除在选择范围之外。
.parent > *:not(:last-child) {
/* 除最后一个子元素之外所有子元素的样式 */
}
示例
在此示例中，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) {
/* 除最后一个子元素之外的所有子元素的样式 */
}
示例
在此示例中，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 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
