Question

任何正文都可以告诉我如何使用last-child选择器设置div subs的最后<div class="main"> <div class="subs"></div> <div class="subs"></div> <div class="subs"></div> <div class="subs"></div> <div class="paginate"></div> </div>个样式吗？

这是我的HTML -

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

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

paginate

但它不起作用。如果我删除subs div，那么它正在运行。所以我可以知道如何在没有任何额外id或类声明的情况下设置最后{{1}} div的样式。

谢谢。

Answer 1

假设您的.subs（.paginate）之后只有1个元素，您可以使用此元素：

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

请参阅此JSFiddle

这可以被视为有点hacky，如果您的paginate元素一直缺席，那么将定位错误的子元素。您唯一的选择是为.subs提供自己的容器，然后使用:last-child：

另一个JSFiddle

P.S：为了理解为什么:last-child无法正常工作，我建议您另外阅读Spudley's answer。

Answer 2

您遇到的问题是因为:last-child无法按照您的想法运作。

:last-child选择器只有当它是其父的最后一个子元素时才会选择元素。

对于.main元素，其中的最后一个子元素是.pagination div。这意味着.main>*:last-child只能选择分页div。如果通过指定.subs来过滤它并不重要;您无法使用:last-child选择任何其他内容，因为其他元素都不是.main的最后一个子元素。如果实际的最后一个子元素不在筛选的选择中，它将不会选择任何内容而不是选择不是最后一个子元素的内容。

解决此问题的最佳方法是将subs元素包装在附加的标记层中，以便最后一个元素成为该容器元素的最后一个子元素。要么是这样，要么将分页元素移到main元素之外;什么最适合你的布局。

您可能尝试过的另一个选择器，:last-of-type以类似的方式工作。目前，没有一个CSS选择器可以使用您当前的标记来选择最后一个.subs元素。（除非你很高兴与:nth-last-child(2)一起选择第二个孩子，假设分页div总是存在）。

在为CSS4设计的新选择器中，有一组“匹配”选择器可以完全按照您的要求进行操作。您可以使用:nth-last-match(1)来获取最后一个匹配元素。这是您需要的选择器。不幸的是，它在当前的浏览器中不可用，并且还没有关于它将来何时（甚至是否）可用的真实提示。目前，you can read about it here，但不使用它。您可以通过JS库（如jQuery）使用它或类似的东西。

希望有助于向您解释事情。

Answer 3

我建议你在最后一个元素中添加一个额外的类名。 http://jsfiddle.net/5FQck/

div.main div {
    border: #000 thin solid;
}

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

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

None of the following selectors work in IE 8 and below，主要是因为它们都是CSS3选择器。

:nth-child(N)
:nth-last-child(N)
:nth-of-type(N)
:nth-last-of-type(N)

您还可以使用JQuery将新类添加到最后一个元素：http://jsfiddle.net/5FQck/1/

$('div.main div.subs:last').addClass('last');

Answer 4

如果我理解正确的话，我会这样做。

.main .subs:nth-child(4)
{
     border:none;
}

某个班级的最后一个孩子不能工作

4 个答案: