📜  css all except last - CSS (1)

📅  最后修改于: 2023-12-03 15:30:07.914000             🧑  作者: Mango

CSS中如何选取除了最后一个元素外的全部元素

在某些情况下,我们需要对除最后一个元素以外的所有元素进行样式设置,下面将介绍几种实现方式。

一、使用:not()伪类

我们可以使用:not()伪类来选择不匹配特定选择器的元素。

li:not(:last-child) {
  /* 样式设置 */
}

上述代码表示选择除了li元素中的最后一个子元素以外的所有li元素。

二、使用nth-last-child伪类

我们可以使用nth-last-child伪类来选择从结尾开始的特定元素。

li:nth-last-child(n+2) {
  /* 样式设置 */
}

上述代码表示选择除了li元素中的最后一个子元素以外的所有li元素,除最后一个元素外,从结尾开始算数的倒数第二个子元素开始。

三、使用flex布局

我们可以使用flex布局,并将margin-right设置为0来去除最后一个元素的右边距。

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  margin-right: 10px;
}

.item:last-child {
  margin-right: 0;
}

上述代码表示去除.container中最后一个.item元素的右边距。

以上就是选取除了最后一个元素以外的全部元素的三种实现方式。