Html div 类的最后一个孩子
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12959655/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
last-child of div class
提问by Tom11
I am finishing some Wordpress web page and I want to style (with CSS) the roll of entries in the Postspage. Wordpress creates this:
我正在整理一些 Wordpress 网页，我想为页面中CSS的条目卷设置样式（使用）Posts。Wordpress 创建了这个：
<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 CSS? (Note that it's not a list so I can't use pseudo-classes)
页面中有大量这些元素，为了将它们分开，我在条目底部使用了边框。问题是我不希望在最后一个条目上有这个边框。可以在 CSS 中完成类似的事情吗？（请注意，它不是一个列表，所以我不能使用伪类）
Here's my CSS, it's pretty simple:
这是我的 CSS，它很简单：
.entry{ border-bottom: 1px solid yellow; }
HTML:
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.
在此先感谢您的帮助。
回答by tuff
You've already named what you're looking for: last-child: http://reference.sitepoint.com/css/pseudoclass-lastchild
您已经命名了您要查找的内容last-child：：http: //reference.sitepoint.com/css/pseudoclass-lastchild
So use .entry:not(:last-child) { border-bottom: 1px solid yellow; }
所以用 .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 .entryelement 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.
JSYK，伪类不依赖于包含元素是列表。如果您的意思是最后一个.entry元素实际上不是其容器的最后一个子元素，则仍然可以选择它。但是我不能告诉你怎么做，除非你告诉我实际的标记是什么样的。
If your final div.entryis not followed by any other divs, then the selector .entry:not(:last-of-type)will work for you.
如果您的 finaldiv.entry后面没有任何其他 div，则选择器.entry:not(:last-of-type)将为您工作。
回答by JimmyRare
.entry:last-child {
border-bottom: none;
}
Let's say you have a list <li>with links <a>inside, and you want to get that last <a>of the <li>'s.
Just use:
比方说，你有一个列表<li>的链接<a>里面，你想获得这最后<a>的的<li>的。只需使用：
.entry:last-child a {
border-bottom: none;
}
This will select the last of the .entryand target it's link(s)
这将选择最后一个.entry并定位它的链接
回答by Ishwor
Pretty simple solution:
非常简单的解决方案：
#wrapper :last-child
{
border:none;
}
回答by Kevin Boucher
For the most comprehensive browser support, I would recommend using this:
对于最全面的浏览器支持，我建议使用这个：
.entry { border-bottom: 1px solid yellow; }
.entry:last-child { border-bottom: 0; }
