div class的最后一个孩子 [英] last-child of div class

问题描述

我正在完成我的wordpress网页，我想用CSS来设计Posts页面中的条目。 Wordpress创建这个：

 < div class =entry> 
  

页面中有这些元素的加载，将它们分开，我在底部使用边界入口。问题是，我不想在最后一个条目上使用此边框。可以是在CSS中完成的任何事情吗？ （请注意，它不是一个列表，所以我不能使用伪类）

以下是CSS，它非常简单：

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

HTML：

 < div id =wrapper> 
< br /> 
有大量代码
< br /> 
< div class =entry>一堆代码< / div> 
< br /> 
< div class =entry>一堆代码< / div> 
< br /> 
< div class =entry>一堆代码< / div> 
< br /> 
另一个巨大的代码
< br /> 
< / div> 
  

预先感谢您的帮助。

解决方案

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

因此，使用 .entry：not（：last-child）{border-bottom：1px纯黄色; }

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

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

如果你的最终 div.entry 没有任何其他的div，那么选择器 .entry：not（：last-of-type）会为你工作。

I am finishing my wordpress web page and I want to style (with the CSS) the roll of entries in the Posts page. Wordpress creates this:

<div class="entry">

There are loads of these elements in the page, to separate them, I used border at the bottom of the entry. The problem is, that I don't want this border on the last entry. Can be anything like that done in the CSS? (Note that it's not a list so I can't use pseudo-classes)

Here's the CSS, it's pretty simple:

.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>

Thanks in advance for your help.

解决方案

You've already named what you're looking for: last-child: http://reference.sitepoint.com/css/pseudoclass-lastchild

So use .entry:not(:last-child) { border-bottom: 1px solid yellow; }

Note that it´s not a list so I can´t use pseudo-classes)

JSYK, the pseudoclass does not depend on the containing element being a list. If you meant that the final .entry element is not actually the last child of its container, it may still be possible to select it. But I can't tell you how unless you show me what the actual markup looks like.

If your final div.entry is not followed by any other divs, then the selector .entry:not(:last-of-type) will work for you.

这篇关于div class的最后一个孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！