10

我正在整理一些 Wordpress 网页，我想（用CSS）样式化页面中的条目卷Posts。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>

在此先感谢您的帮助。

4

4 回答 4

13

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

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

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

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

如果您的 finaldiv.entry后面没有任何其他 div，那么选择器.entry:not(:last-of-type)将为您工作。

于 2012-10-18T16:47:25.697 回答
8 
.entry:last-child {
  border-bottom: none;
}

假设您有一个<li>包含链接的列表<a>，并且您想要获取最后一个<a>' <li>s. 只需使用：

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

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

于 2012-10-18T16:51:02.123 回答
4

非常简单的解决方案：

#wrapper :last-child
{
    border:none;
}
于 2014-10-15T05:12:30.930 回答
1

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

.entry { border-bottom: 1px solid yellow; }
.entry:last-child { border-bottom: 0; }
于 2012-10-18T16:49:13.380 回答