添加 :last-child 或 :last-of-type 到导航菜单

Question

通常 CSS 是我的事，但我有点困惑为什么这对我不起作用。我正在通过 Cargo 构建一个用于 CMS 目的的网站，您可以在这里看到它：http://cargocollective.com/mikeballard

在我的菜单中，我有五个主要类别，单击它们（例如图像）会显示该类别下的作品列表。

<div id="menu_2444167" class="link_link">
    <a id="p2444167" name="mikeballard" target="" href="http://cargocollective.com/mikeballard/filter/images">Images</a>
</div>
<div id="menu_2444188" class="project_link">
    <a name="mikeballard" rel="history" href="mikeballard/#2444188/Ultra-Nomadic-Def-Smith-Cycle-2011">Ultra Nomadic Def Smith Cycle, 2011</a>
</div>
<!-- more divs here -->
<div id="menu_2444201" class="project_link">
    <a name="mikeballard" rel="history" href="mikeballard/#2444201/Archive">Archive</a>
</div>

基本上，我试图选择该集中的最后一个 div，并为该 div 添加 margin-bottom:15px 。我尝试过使用：

.project_link:last-child

或

.project_link:last-of-type

但它似乎不起作用。

HTML 不能改变太多以依赖 Cargo，它并不好，就像他们使用列表项一样，而不是带有锚标记的 div，我认为这会容易得多。

Answer 1

IE9 之前不支持

:last-of-type

和

:last-child

选择器。

---

当涉及

:last-child 和 :last-of-type

 选择器时，

类名等不会被查看

。如果特定元素是父元素中的最后一个子元素并且具有类“project_link”，则

.project_link:last-child

选择器将

仅触发，并且如果特定元素是

选择器将

仅触发该类型的最后一个元素并且具有类“project_link”。 两者都应该在支持的浏览器中触发，因为它隐含为

.project_link:last-of-type

并且将检查该父级内的每种类型的元素（无论如何，这似乎只是划分）。此处显示的最后一个分区具有与此规则匹配的“project_link”类。这些不会触发的唯一原因是，如果您在向我们展示的内容下方有额外的元素（或分区），或者您使用的浏览器不支持它。