html - 某个类(class)的最后一个 child 不工作

Question

谁能告诉我如何使用 last-child 选择器来设置 subs 的最后一个 div 样式？

这是我的 HTML -

<div class="main">
  <div class="subs"></div>
  <div class="subs"></div>
  <div class="subs"></div>
  <div class="subs"></div>
  <div class="paginate"></div>
</div>

我在我的 CSS 中尝试过类似的东西 -

div.main div.subs:last-child {
   border: none;
}

但是它不起作用。如果我删除 paginate div，那么它就可以工作了。那么我可以知道如何在没有任何额外的 id 或类声明的情况下设置 last subs div 的样式。

谢谢。

Answer 1

假设您的 .subs (.paginate) 之后只有 1 个元素，您可以使用这个:

div.main div:nth-last-child(2) {
   border:none;
}

查看此 JSFiddle

这可以看作是有点 hacky，如果您的分页元素永远不存在，那么将定位到错误的子元素。您唯一的其他选择是为 .subs 提供它们自己的容器，然后使用 :last-child:

另一个JSFiddle

---

P.S:要理解为什么 :last-child 没有按照您想要的方式工作，我真的建议您也阅读 Spudley's answer .