选择列表中类的最后一个元素[重复]答案

【问题标题】：Select last element of a class in a list [duplicate]选择列表中类的最后一个元素[重复]
【发布时间】：2021-04-07 00:21:16
【问题描述】：

基本上，我有一个由不同类型的元素动态生成的列表，我需要为每种类型选择最后一个元素。

例子：

<div>
   <ul>
      <li class="aaa">
         <a class="bbb ccc">First element of type ccc</a>
         <table class="zzz"></table>
      </li>
      <li class="aaa">
         <a class="bbb ccc">Second element of type ccc</a>
         <table class="zzz"></table>
      </li>
      <li class="aaa">
         <a class="bbb ccc">Third element of type ccc</a>
         <table class="zzz"></table>
      </li>
      <li class="aaa">
         <a class="bbb ddd">First element of type ddd</a>
         <table class="zzz"></table>
      </li>
      <li class="aaa">
         <a class="bbb ddd">Second element of type ddd</a>
         <table class="zzz"></table>
      </li>
      <li class="aaa">
         <a class="bbb eee">First element of type eee</a>
         <table class="zzz"></table>
      </li>
   </ul>
</div>

我需要选择每种类型的最后一个元素。

我尝试使用 :last/:last-child/:last-of-type 但我认为我错过了一些东西或者我没有找到正确的组合。有人可以帮我吗？

【问题讨论】：

你需要 JavaScript 来完成这个
您要选择 ccc 的每个第三个元素和 ddd 的每个第二个元素，还是只选择相应类的第三个和第二个元素？
我需要为每种类型选择最后一个元素。 ccc的最后一个，ddd的最后一个，eee的最后一个。

标签： html css css-selectors

【解决方案1】：

这里是选择它们的方法，但您可以看到它们是静态的。我建议使用 javascript，这样做：document.getElementsByClassName('ccc')[2] 将返回第三个 .ccc 元素。了解更多关于 DOM 遍历和NodeList

.aaa:nth-child(3) .ccc {
color:red;
}
.aaa:nth-child(5) .ddd {
color:green;
}
.aaa:nth-child(6) .eee {
color:blue;
}

<div>
   <ul>
      <li class="aaa">
         <a class="bbb ccc">First element of type ccc</a>
         <table class="zzz"></table>
      </li>
      <li class="aaa">
         <a class="bbb ccc">Second element of type ccc</a>
         <table class="zzz"></table>
      </li>
      <li class="aaa">
         <a class="bbb ccc">Third element of type ccc</a>
         <table class="zzz"></table>
      </li>
      <li class="aaa">
         <a class="bbb ddd">First element of type ddd</a>
         <table class="zzz"></table>
      </li>
      <li class="aaa">
         <a class="bbb ddd">Second element of type ddd</a>
         <table class="zzz"></table>
      </li>
      <li class="aaa">
         <a class="bbb eee">First element of type eee</a>
         <table class="zzz"></table>
      </li>
   </ul>
</div>

【讨论】：