时间戳

首页 > 解决方案 > CSS选择器：有没有办法选择整个html中具有相同类名的最后一个元素？

html - CSS选择器：有没有办法选择整个html中具有相同类名的最后一个元素？

问题描述

<ul></ul>
... // many ul s here
<ul>
  <li class="list">test1</li>
  <li class="list">test2</li>
  <li class="list">test3</li>
</ul>
<ul>
  <li class="list">test4</li>
  <li class="list">test5</li>
  <li class="list">test6</li>
</ul>
... // many ul s here
<ul></ul>

如何使用 CSS 选择器选择“test6”？

重要的：

  1. 由于页面中可能有很多ul标签，所以不能直接写ul:nth-child(2) > li
  2. 没有任何 js 或 jQuery 函数，只有 CSS。
  3. 这与其他问题有点不同。元素在不同的 div 中，我想得到最后一个classname="list"

任何帮助将不胜感激，谢谢！

标签： htmlcss

解决方案

您可以将 last-of-type 与 last-child 结合起来

ul:last-of-type .list:last-child  {
    background: #ff0000;
}
<ul>
  <li class="list">test1</li>
  <li class="list">test2</li>
  <li class="list">test3</li>
</ul>
<ul>
  <li class="list">test4</li>
  <li class="list">test5</li>
  <li class="list">test6</li>
</ul>

推荐阅读