Question

jsFiddle - 我试图只在包装器中有超过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;
}

Answer 1

是。你可以做到这一点。你几乎只有一些小的修正。

小提琴：http://jsfiddle.net/kiranvarthi/q5parpxy/4/

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

Answer 2

这是正确的语法

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

<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>

last-child应该没有大括号

Answer 3

你在这里

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

<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>

<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>

<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 class="container">Container #6</div>
</div>

CSS last-child如果超过4个元素

3 个答案: