📅  最后修改于: 2023-12-03 15:30:07.914000             🧑  作者: Mango
在某些情况下,我们需要对除最后一个元素以外的所有元素进行样式设置,下面将介绍几种实现方式。
:not()
伪类我们可以使用:not()
伪类来选择不匹配特定选择器的元素。
li:not(:last-child) {
/* 样式设置 */
}
上述代码表示选择除了li
元素中的最后一个子元素以外的所有li
元素。
nth-last-child
伪类我们可以使用nth-last-child
伪类来选择从结尾开始的特定元素。
li:nth-last-child(n+2) {
/* 样式设置 */
}
上述代码表示选择除了li
元素中的最后一个子元素以外的所有li
元素,除最后一个元素外,从结尾开始算数的倒数第二个子元素开始。
我们可以使用flex布局,并将margin-right
设置为0
来去除最后一个元素的右边距。
.container {
display: flex;
flex-wrap: wrap;
}
.item {
margin-right: 10px;
}
.item:last-child {
margin-right: 0;
}
上述代码表示去除.container
中最后一个.item
元素的右边距。
以上就是选取除了最后一个元素以外的全部元素的三种实现方式。