2

任何人都可以告诉我如何使用选择器来设置我的最后一个last-child样式吗？divsubs

这是我的 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;
}

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

谢谢你。

4

4 回答 4

4

.subs假设你的( )后面只有 1 个元素.paginate，你可以使用这个：

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

看到这个JSFiddle

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

另一个JSFiddle

PS：要了解为什么:last-child不按您想要的方式工作，我真的建议您也阅读Spudley 的回答。

于 2013-07-31T10:02:08.390 回答
3

你遇到的问题是因为:last-child它不像你想象的那样工作。

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

对于您的.main元素，其中的最后一个子元素是.paginationdiv。这意味着.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)获取最后一个匹配元素。这是您需要的选择器。不幸的是，它在当前的浏览器中不可用，而且还没有真正的暗示来说明它何时（甚至是否）将来会可用。目前，您可以在此处阅读有关它的信息，但不要使用它。您可能可以通过 jQuery 之类的 JS 库来使用它或类似的东西。

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

于 2013-07-31T10:17:18.820 回答
1

我建议您在最后一个元素中添加一个额外的类名。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>

以下选择器均不适用于 IE 8 及以下版本，主要是因为它们都是 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');
于 2013-07-31T10:12:42.700 回答
0

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

.main .subs:nth-child(4)
{
     border:none;
}
于 2013-07-31T10:07:57.880 回答