Question

我正在完成我的wordpress网页，我想在帖子页面中设置（使用CSS）条目卷。 Wordpress创建了这个：

<div class="entry">

页面中有大量这些元素，为了将它们分开，我在条目的底部使用了边框。问题是，我不想在最后一个条目上使用此边框。可以像在CSS中那样完成吗？（请注意，它不是列表，所以我不能使用伪类）

这是CSS，非常简单：

.entry{  border-bottom: 1px solid yellow; }

HTML：

<div id="wrapper">
  <br />
  there are loads of code
  <br />
  <div class="entry">bunch of code there</div>
  <br />
  <div class="entry">bunch of code there</div>
  <br />
  <div class="entry">bunch of code there</div>
  <br />
  another huge code
  <br />
</div>

提前感谢您的帮助。

Answer 1

您已经命名了您要找的内容：last-child：http://reference.sitepoint.com/css/pseudoclass-lastchild

因此请使用.entry:not(:last-child) { border-bottom: 1px solid yellow; }

请注意，它不是列表，所以我不能使用伪类）

JSYK，伪类不依赖于包含元素的列表。如果您认为最终.entry元素实际上不是其容器的最后一个子元素，则仍可以选择它。但除非你告诉我实际的标记是什么样的，否则我无法告诉你。

如果您的最终div.entry后面没有任何其他div，则选择器.entry:not(:last-of-type)将适合您。

Answer 2

.entry:last-child {
  border-bottom: none;
}

假设您有一个列表<li>，其中包含<a>个链接，您希望获得<a>的最后<li>个。只需使用：

.entry:last-child a {
  border-bottom: none;
}

这将选择最后一个.entry并定位它的链接

Answer 3

非常简单的解决方案：

#wrapper :last-child
{
    border:none;
}

Answer 4

对于最全面的浏览器支持，我建议使用它：

.entry { border-bottom: 1px solid yellow; }
.entry:last-child { border-bottom: 0; }

div班的最后一个孩子

4 个答案: