选择递归:最后一个孩子。 可能?(Select recursive :last-child. P

2019-07-31 16:06发布

在CSS中,是有可能递归地选择所有的:从身体最后的孩子吗​​?

鉴于这种标记:

<body>
  <div id="_1">
    <div id="_2"></div>
  </div>
  <div id="_3">
    <div id="_4">
      <div id="_5"></div>
      <div id="_6"></div>
    </div>
  </div>
</body>

我要找的div没有。 3,4和6

把它的另一种方式是这样的:

body > :last-child,
body > :last-child > :last-child,
body > :last-child > :last-child > :last-child,
body > :last-child > :last-child > :last-child > :last-child {
  /* My stuff here */
}

但显然这不是一个好办法。

Answer 1:

不,不幸的是,这只是要做到这一点,而无需修改HTML的唯一途径。

已经有至少一个请求的递归版本:first-child:last-child伪类,但它似乎并没有获得了大量支持。 请注意,它表明嵌套和重复伪类以同样的方式在你的问题:

目前,据我所知,我们只能配合以下的儿童(在下面的示例3)提前知道一些确切的嵌套层次:

 .container > :first-child, .container > :first-child > :first-child, .container > :first-child > :first-child > :first-child {} 

因为它也将选择块的第一个孩子是不是第一个孩子自己第一胎上下文选择:我们不能使用而已。

因此,我们需要一种递归选择的匹配不只是倒数第一的孩子,但递归匹配所有的第一,大多数和最后大多数元素不论其嵌套层次的。



Answer 2:

无需链的所有道路。 这将是单纯地喜欢这

div:last-child {
   /* Your GREAT css */
}

演示

更新:在这种情况下,给div2一个典型的类,并使用:not()推了选择

div:last-child:not(.nolist) {
    border: 1px solid red;
}

演示



Answer 3:

body :last-child {
    color:red;
}
body :not(:last-child) :last-child {
    color:initial;
}


文章来源: Select recursive :last-child. Possible?