11

在 CSS 中，是否可以从正文中递归选择所有 :last-child？

鉴于此标记：

<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 */
}

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

4

3 回答 3

7

不，不幸的是，这只是不修改 HTML 的唯一方法。

至少有一个请求需要递归版本的:first-child和:last-child伪类，但它似乎并没有获得太多的青睐。请注意，它建议以与您的问题相同的方式嵌套和重复伪类：

目前，AFAIK，我们只能将子级匹配到预先知道的某个确切的嵌套级别（下例中的 3）：

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

我们不能只使用 :first-child 上下文选择器，因为它也会选择块本身不是第一个孩子的第一个孩子。

所以我们需要一种递归选择器，它不仅匹配最后一个子元素的第一个，而且递归地匹配所有第一个和最后一个元素，而不管它们的嵌套级别如何。

于 2012-09-18T13:03:23.900 回答
2 
body :last-child {
    color:red;
}
body :not(:last-child) :last-child {
    color:initial;
}

任何不是最后一个子元素的后代的最后一个子元素都将反转更改。

于 2019-03-12T14:58:51.210 回答
0

无需一路上链。就像这样

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

演示

更新：在这种情况下，给出div2一个典型的类并用于:not()推出选择

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

演示

于 2012-09-18T12:46:17.760 回答