Question

我正在尝试使用div类获取one_third的最后一个实例。我已尝试了许多不同的:last-child订单，但我无法让它们发挥作用。

这是结构

<div class="container">
    <div class="one_third">One</div>
    <div class="one_third">Two</div>
    <div class="one_third">Three</div> <-- remove the margin from this one
    <div class="clearfix"></div>
</div>

我试过

.container:last-child .one_third { margin-right: 0; }

这将删除具有该类的所有div的边距，而不仅仅是最后一个。我怎样才能让它发挥作用？谢谢！

Answer 1

.container .one_third:last-child {
}

Answer 2

您可能最好手动将last类添加到上一个div，并将其作为目标。除此之外，您将不得不使用JS来获取具有不太理想的特定类的最后一个元素。

<div class="container">
    <div class="one_third">One</div>
    <div class="one_third">Two</div>
    <div class="one_third last">Three</div> <-- remove the margin from this one
    <div class="clearfix"></div>
</div>

你的CSS：

.container .one_third.last { margin-right: 0; }

.last-child在您的实例中不起作用，因为该伪选择器只会选择其父亲的最后一个孩子。因此，如果在您的上一个one_third div之后没有其他类型的元素，它将起作用，但如果存在则它不会起作用。

last-of-type拥有它自己的一组奇怪的地方，它会根据元素类型选择，而不仅仅是类名 - 无论你在CSS中使用了哪种选择器。请参阅此处以获取示例：http://jsfiddle.net/YmMZZ/1/

Answer 3

尝试

.container .one_third:last-child { margin-right: 0; }

jsFiddle

Answer 4

:nth-last-child here上有一篇很好的文章。

我会尝试：

.container .one-third:nth-last-child(1) { /* ... */ }

获取元素中的最后一个类实例

4 个答案: