Tumblr中:last-of-type选择器失效问题及解决方法咨询

这问题我太熟了，当初刚接触CSS伪类的时候也踩过这个坑！

问题的核心原因 #

你误解了:last-of-type的工作逻辑——它不是找最后一个拥有指定class的元素，而是找父元素下所有同类型（这里是<div>）元素里的最后一个，并且这个元素刚好有你指定的class。

看你的结构：

<div class="entry">
  <div class="container"> {block:Posts} ....... {/block:Posts} </div>
  <div class="pagination">....</div>
</div>

当你添加.pagination这个<div>后，.entry父元素下的最后一个<div>变成了.pagination，而不是最后一个.container。这时候.container:last-of-type就找不到匹配的元素了——因为最后一个<div>没有.container类，自然不会被选中。

解决方法：不受其他元素影响选中最后一个.container #

这里给你几个可行的方案，按兼容性和易用性排序：

• 方案1：使用:not(:has(+.container))（现代浏览器推荐）
  这个选择器的意思是：匹配后面没有跟着另一个.container元素的.container，也就是真正的最后一个.container，不管它后面有没有.pagination或者其他元素：

  .container { width: 400px; border-bottom: 1px solid #111; }
  .container:not(:has(+.container)) { border-bottom: 0; }
  

  注意：:has选择器现在主流现代浏览器（Chrome、Firefox 121+、Safari 15.4+）都支持了，适合大多数Tumblr主题场景。

• 方案2：利用元素位置反向匹配（兼容旧浏览器）
  如果你的.pagination是.entry下固定的最后一个<div>，可以用nth-last-of-type选择倒数第二个<div>（也就是最后一个.container）：

  .container { width: 400px; border-bottom: 1px solid #111; }
  .entry > .container:nth-last-of-type(2) { border-bottom: 0; }
  

  局限性：如果后续.entry下新增其他<div>元素，这个选择器会失效。

• 方案3：调整HTML结构（最稳妥）
  如果可以修改Tumblr模板结构，把.pagination移出.entry容器，或者给它换个非<div>的标签（比如<nav>）：

  <div class="entry">
    <div class="container"> {block:Posts} ....... {/block:Posts} </div>
  </div>
  <nav class="pagination">....</nav>
  

  这样.entry下的最后一个<div>还是.container，原来的.container:last-of-type就能正常工作了。

内容的提问来源于stack exchange，提问作者jae