最后一类班级

Question

我想选择每个类的最后一个类型。我不知道有多少列表项目，所以我不能使用nth-child(2)例如。我可以用css做这个吗?还是必须添加一个last类宽度脚本？

• 组-1
• 组-1
• 组-2
• 组-2
• 第3组
• 第3组

​

.group-1:last-of-type {
  margin-bottom: 50px;
}
.group-2:last-of-type {
  margin-bottom: 50px;
}
.group-3:last-of-type {
  margin-bottom: 50px;
}

<ul>
  <li class="group-1">Group1</li>
  <li class="group-1">Group1</li>
  <li class="group-2">Group2</li>
  <li class="group-2">Group2</li>
  <li class="group-3">Group3</li>
  <li class="group-3">Group3</li>
</ul>

​

Answer 1

您可以使用相邻的同级组合器 + css选择器。

element1 + element2意味着只有在它紧跟在第一个元素element1之后，它才会选择第二个元素element1。

堆栈片段

​

.group-1+.group-2 {
  margin-top: 50px;
}

.group-2+.group-3 {
  margin-top: 50px;
}

<ul>
  <li class="group-1">Group1</li>
  <li class="group-1">Group1</li>
  <li class="group-1">Group1</li>
  <li class="group-2">Group2</li>
  <li class="group-2">Group2</li>
  <li class="group-2">Group2</li>
  <li class="group-2">Group2</li>
  <li class="group-2">Group2</li>
  <li class="group-2">Group2</li>
  <li class="group-3">Group3</li>
  <li class="group-3">Group3</li>
  <li class="group-3">Group3</li>
  <li class="group-3">Group3</li>
  <li class="group-3">Group3</li>
</ul>

​

参考链接 adjacent sibling combinator

Answer 2

您可以在css中使用：:nth-child(2n)

li:nth-child(2n){
  margin-bottom: 50px;
}