div班的最后一个孩子

Tom*_*m11 10 html css wordpress css-selectors

我正在完成我的wordpress网页,我想在帖子页面中设置(使用CSS)条目卷.Wordpress创建了这个:

<div class="entry">
Run Code Online (Sandbox Code Playgroud)

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

这是CSS,它非常简单:

.entry{  border-bottom: 1px solid yellow; }
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

在此先感谢您的帮助.

tuf*_*uff 13

您已经命名了您正在寻找的内容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)将适合你.


Jim*_*are 6

.entry:last-child {
  border-bottom: none;
}
Run Code Online (Sandbox Code Playgroud)

比方说,你有一个列表<li>的链接<a>里面,你想获得这最后<a>的的<li>的.只需使用:

.entry:last-child a {
  border-bottom: none;
}
Run Code Online (Sandbox Code Playgroud)

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