使用CSS </div> </div>在一组<div>中定位最终的<div>

Question

我有以下代码：

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

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

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

如何使用CSS定位最后的 div 元素？如果可能的话，我想改变造型。

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

可悲的是，我无法访问生成的HTML，所以这甚至可能吗？

Answer 1

您可以使用.sidebar:last-child，请参阅：http://jsfiddle.net/thirtydot/JJw4w/

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

所有现代浏览器和IE9 +都支持

:last-child（不 IE8！）。

Answer 2

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

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

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

你可以这样做：

#container div:last-child{}

Answer 3

您可以随时为每个id使用不同的div，然后选择您想要的任何内容。

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