div 类的最后一个孩子

Posted 2023-03-05

【中文标题】div 类的最后一个孩子

【英文标题】：last-child of div class

【发布时间】：2012-10-09 04:57:28

【问题描述】：

我正在整理一些 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>

提前感谢您的帮助。

【问题讨论】：

为什么不能使用伪类？

如果您能展示 HTML 结构的一部分以及如何放置 <div class="entry"></div> 元素，那就太好了。

【参考方案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) 将为您工作。

【讨论】：

我想，正如 OP 所说，这行不通。看起来，这些条目没有在容器中一个接一个地列出。

我认为他的意思不是列表本身，而是 <div>s 在单个容器中的列表，:last-child 可以工作。但也许我弄错了。 :)

目前无法仅使用 CSS 选择器选择某个类的最后一个元素，而不对标记进行假设。 ***.com/questions/10230416/…

不，但如果它是last-of-type，或者如果它有一些其他特定的外围允许我们定位它，它仍然可以被选中。取决于标记！

“它们没有在任何容器中列出”太模棱两可而无用。你能张贴标记吗？

【参考方案2】：

为了获得最全面的浏览器支持，我建议使用这个：

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

【讨论】：

这在浏览器支持上与.entry:not(:last-child)没有什么不同。

@BoltClock 是的，但凯文的方式将在不支持的浏览器上的所有元素上都有边框，而不是没有，这可能是可取的

@BoltClock 你是对的，但这取决于OP想要使用这种方法进行降级。全部，或无。

请注意，如果有人遇到此问题并有所帮助，请注意；虽然 :not 和 :last-child 共享完全相同的浏览器支持，但 :first-child 支持更多（ie8 支持 :first-child，但不支持 :not 或 :last-child）。以防万一有人挠头，为什么 :last-child 和 :not 与 ie8 中的 :first-child 不一样。

【参考方案3】：

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

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

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

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

【讨论】：

但我不想定位它的链接，我想与 .entry 元素相邻。

那只用第一部分？还是我错过了什么？

你可能有specificity的问题。

【参考方案4】：

非常简单的解决方案：

#wrapper :last-child

    border:none;