Html CSS最后一个子元素（如果超过4个元素）

-仅当包装中的容器超过4个时，我才尝试使最后一个元素高亮显示。是否可以使用css而不是JS来实现这一点

<div class="wrapper">
    <div class="container">Container #1</div>
    <div class="container">Container #2</div>
    <div class="container">Container #3</div>
    <div class="container">Container #4</div>
    <div class="container">Container #5</div>
</div>

.wrapper div:nth-child(n+4):last-child() {
   background-color: gold;
}

集装箱#1
集装箱#2
集装箱#3
集装箱#4
集装箱#5
.wrapper div:n子级（n+4）：last-child（）{
背景颜色：金色；
}

是。你可以做到这一点。你差不多到了，只是一些小的修正

小提琴：

---

这是正确的语法

.wrapper div:n子级（n+4）：最后一个子级{
背景颜色：金色；
}

集装箱#1
集装箱#2
集装箱#3
集装箱#4
集装箱#5

给你

.wrapper div:最后一个子项：第n个子项（n+5）{
背景颜色：金色；
}

集装箱#1
集装箱#2
集装箱#3
集装箱#4
集装箱#1
集装箱#2
集装箱#3
集装箱#4
集装箱#5
集装箱#1
集装箱#2
集装箱#3
集装箱#4
集装箱#5
集装箱#6

您希望这样的输出吗？如果您想要超过4个（不包括4个），那么应该使用规则

。wrapper div:nth child（n+5）：last-child（）

@Terry it's

：last child

though@misterManSam哦，是的，我站在更正：

.wrapper div:n个孩子（n+5）：last child

您比上次快了一秒钟：d如果只有4个元素，则此操作会将背景添加到第4个元素：）更新了答案和小提琴。答案已经过账了，为什么您认为需要再次键入几乎相同的内容？？

.wrapper div:nth-child(n+5):last-child {
   background-color: gold;
}