Html 某一类的最后一个孩子是';行不通

Html 某一类的最后一个孩子是';行不通,html,css,Html,Css,有谁能告诉我如何使用last child选择器来设置subs的最后div 这是我的HTML- <div class="main"> <div class="subs"></div> <div class="subs"></div> <div class="subs"></div> <div class="subs"></div> <div class="pagin

有谁能告诉我如何使用
last child
选择器来设置
subs
的最后
div

这是我的HTML-

<div class="main">
  <div class="subs"></div>
  <div class="subs"></div>
  <div class="subs"></div>
  <div class="subs"></div>
  <div class="paginate"></div>
</div>
但它不起作用。如果我删除
paginate
div,那么它正在工作。因此,我可以知道如何在没有任何额外id或类声明的情况下设置last
subs
div的样式


多谢各位

假设在
.subs
.paginate
)之后只有一个元素,您可以使用以下方法:

div.main div:nth-last-child(2) {
   border:none;
}
看到这个了吗

这可以被看作是有点粗糙,如果您的paginate元素曾经不存在,那么错误的子元素将成为目标。您唯一的其他选择是为
.sub
提供自己的容器,然后使用
:last child

另一个



p.S:要理解为什么
:最后一个孩子的工作方式不是你想要的,我真的建议你也阅读。

如果我理解正确,我会这样做

.main .subs:nth-child(4)
{
     border:none;
}

我建议您在最后一个元素中添加一个额外的类名

div.main div{
边框:#000薄实心;
}
主辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅辅{
边界:无;
}

潜艇
潜艇
潜艇
潜艇
标页码
,主要是因为它们都是CSS3选择器

  • :第N个子项(N)
  • :第N个最后的子项(N)
  • :第N种类型(N)
  • :类型(N)的第N个最后一个

您还可以使用JQuery将该新类添加到最后一个元素中:

$('div.main div.subs:last').addClass('last');

你的问题是因为
:最后一个孩子的工作方式与你想象的不一样

:last child
选择器仅当元素是其父元素的最后一个子元素时才会选择该元素

对于
.main
元素,其中的最后一个子元素是
.pagination
div。这意味着
.main>*:最后一个子元素只能选择pagination div。通过指定
.subs
来过滤它并不重要;您不能使用
:last child
选择任何其他元素,因为其他元素都不是
.main
的最后一个子元素。如果实际的最后一个子元素不在筛选的选择中,它将不选择任何内容,而不是选择不是最后一个子元素的内容

解决这个问题的最佳方法是将
subs
元素包装在一个附加的标记层中,这样最后一个元素就成为该容器元素的最后一个子元素。或者将分页元素移到
元素之外;任何最适合你的布局的东西

您可能尝试过的另一个选择器,
:last of type
的工作方式类似。目前还没有CSS选择器,您可以使用当前标记来选择最后一个
.subs
元素。(除非您愿意使用
:n最后一个孩子(2)
,它将选择倒数第二个孩子,前提是分页div始终存在)

在为CSS4设计的新选择器中,有一组“匹配”选择器可以完全执行您想要执行的操作。您可以使用
:n最后一个匹配(1)
获取最后一个匹配元素。这是您需要的选择器。不幸的是,它在当前的浏览器中不可用,而且对于它在未来何时(甚至是否)可用还没有真正的提示。暂时,但不要使用它。您可以通过jQuery之类的JS库使用它或类似的东西


希望这有助于向您解释。

尝试使用div.paginate{border:none!important;}您使用的浏览器是什么(提示:
IE8不支持最后一个孩子
)是的,这对我有用。在问这个问题之前,我试着使用了第n个孩子的选择器。但我想不出来。你能解释一下这是怎么回事吗。谢谢。@TNK
n最后一个子元素(n)
使用参数针对作用域中相对于最后一个元素的元素。(1) 作为最后一个元素,(2)是倒数第二个,等等。如果一个'subs'类的div多于4,会发生什么?我将使用:last of type代替:)附加的;正式文件:
.main .subs:nth-child(4)
{
     border:none;
}