使用 CSS 在一组 <div> 中定位最终 <div>答案

【问题标题】：Target final <div> in a set of <div>s using CSS使用 CSS 在一组 <div> 中定位最终 <div>
【发布时间】：2011-08-19 05:49:07
【问题描述】：

我有以下代码：

<div class="sidebar">1</div>

<div class="sidebar">2</div>

<div class="sidebar">3</div>

如何使用 CSS 定位最后一个 div 元素？如果可能，我想更改样式。

<div class="sidebar">3</div>

很遗憾，我无法访问生成的 HTML，所以这可能吗？

【问题讨论】：

【解决方案1】：

你可以使用.sidebar:last-child，见：http://jsfiddle.net/thirtydot/JJw4w/

如果它是其父元素的最后一个元素，它将选择您的<div class="sidebar">3</div>。

所有现代浏览器和 IE9+（不IE8！）都支持:last-child。

【讨论】：

这是正确的，除了带有 .sidebar 类名的 div 需要在另一个容器中（类似于 sidebar-container），然后你会说 #sidebar-container:last-child。
哦。我不知道你可以这样使用 last-child 。不错！
@Tom：不，它不是这样工作的。 #sidebar-container:last-child 将选择 #sidebar-container 如果它是其父元素的最后一个子元素。
史诗。非常感谢。我将使用该解决方案。干净整洁。再次感谢。
检查一下，在侧边栏 div 打破逻辑后添加p：jsfiddle.net/JJw4w/12 @JamieDixon 提到：“假设 div 是最后一项”，这很重要。跨度>

【解决方案2】：

如果无法访问 HTML，最好的办法是使用 last-child CSS 选择器。

这假定 div 是某个父元素中的最后一项，因此：

<div id="container">
<div></div>
<div></div>
<div></div>
</div>

你可以这样做：

#container div:last-child{}

【讨论】：

【解决方案3】：

您始终可以为每个div 使用不同的id，然后选择您想要的任何一个。

<div class="sidebar" id="sidebar_1">1</div>
<div class="sidebar" id="sidebar_2">2</div>
<div class="sidebar" id="sidebar_3">3</div>

【讨论】：