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

Html 获取元素中类的最后一个实例,html,css,css-selectors,Html,Css,Css Selectors,我正在尝试获取类为1/3的div的最后一个实例。我尝试了很多不同的:最后一个孩子,但我无法让他们工作 结构如下 <div class="container"> <div class="one_third">One</div> <div class="one_third">Two</div> <div class="one_third">Three</div> <-- remove t

我正在尝试获取类为
1/3
div的最后一个实例。我尝试了很多不同的
:最后一个孩子
,但我无法让他们工作

结构如下

<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>
这将删除该类的所有div的边距,而不仅仅是最后一个div。我怎样才能让它工作?谢谢

试试看

.container .one_third:last-child {
}

您最好手动将
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>
.last child
在您的实例中不起作用,因为伪选择器将只选择其父对象的最后一个子对象。因此,如果在上一个
1/3
div之后没有其他类型的元素,那么它将起作用,但如果有,它将不起作用


类型的最后一个
有它自己的一组奇怪之处,它将根据元素类型而不仅仅是类名进行选择,而不管您在CSS中使用了什么选择器。请参见此处的示例:

有一篇关于
:n最后一个孩子的好文章

我会尝试:

.container.三分之一:第n个最后一个子(1){/*…*/}


伪类在元素上工作,而不是在元素类上工作。@j08691这个JSFIDLE说你的工作非常糟糕wrong@j08691如果你相信这是正确的,那你就错了。@nzifnab-你显然不明白自己在做什么。告诉我为什么这里没有选择最后三分之一的课程。在您的示例中,该类恰好与最后一个子类匹配。不好的例子,因为它不是它父母的最后一个孩子<代码>。四分之一是。要选择最后一个div吗?像这样使用
.container>:最后一个子项{color:red;}
@mbeckish,它在少数情况下失败conditions@zachstames检查我的更新答案。。。我想这可能是你在这里的最佳选择。另一种方法是使用
::在
伪元素之后实现clearfix hack,然后简单地选择容器的最后一个子元素,如下所示:TW Bootstrap和大多数CSS框架也使用此方法。是的,我也喜欢@HashemQolami解决方案。我认为这是一个比div版本更干净的clearfix黑客,它使您的标记。。。更好砰。为什么这个分数是负数?这里有什么不对劲吗?不行。当我向container div添加第四个元素时,使用不同的类,“Third time”不再是绿色的。正如在另一个线程中提到的,这是因为它不再是父级的最后一个子级。事实上,您已经更改了您的问题,因为这个答案在您更改之前是正确的。因此,删除这个答案,因为它不再相关了?@nzifnab您应该至少包含一些细节,说明为什么
最后一个孩子和
最后一个类型的
在答案中不起作用,因为注释可能会被删除(应该如此)。不太喜欢此解决方案,因为它很脆弱。如果您在另一个位置有相同的标记,但没有清除hack修复程序,则选择最后一个元素将不再有效:\n我认为更好的解决方案可能是使用已提供的更好的清除修复程序之一,而不是div变体。
:n last child(1)
相当于
:最后一个孩子
,因此不起作用。您是否愿意解释一下它在Firefox和Chrome中是如何工作的?我已经解释过了。请再次阅读我的评论。不,您没有。小提琴没有任何错误。即使将代码复制到一个空白HTML文件中,它仍然可以正常工作。
.container .one_third:last-child { margin-right: 0; }
<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>
.container .one_third.last { margin-right: 0; }