CSS 可以检测元素的子元素数量吗？

Question

我可能正在回答我自己的问题，但我非常好奇。

我知道 CSS 可以选择父级的单个子级，但是如果其父级有一定数量的子级，是否支持为容器的子级设置样式。

例如

container:children(8) {
  // style the parent this way if there are 8 children
}

我知道这听起来很奇怪，但我的经理让我检查一下，我自己没有找到任何东西，所以我决定在结束搜索之前转向 SO。

Answer 1

澄清：

由于原始问题中的先前措辞，一些 SO 公民提出了担忧，即该答案可能具有误导性。请注意，在 CSS3 中，样式不能根据子节点的数量应用于 父节点。但是，样式可以根据子节点拥有的兄弟节点数应用到子节点。

---

原答案：

令人难以置信的是，这现在完全可以在 CSS3 中实现。

/* one item */
li:first-child:nth-last-child(1) {
/* -or- li:only-child { */
    width: 100%;
}

/* two items */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
    width: 50%;
}

/* three items */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
    width: 33.3333%;
}

/* four items */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
    width: 25%;
}

诀窍是在第一个孩子也是倒数第二个孩子的情况下选择第一个孩子。这有效地根据兄弟姐妹的数量进行选择。

这项技术的功劳归于 André Luís（发现）和 Lea Verou（精炼）。

你不只是喜欢 CSS3 吗？ ?

CodePen 示例：

• https://codepen.io/mattlubner-the-decoder/pen/ExaQZQR

来源：

• http://andr3.net/blog/post/142（安德烈·路易斯）
• http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ (Lea Verou)

Answer 2

没有。嗯，不是真的。有几个选择器可以让您更加接近，但可能在您的示例中不起作用，并且没有最佳的浏览器兼容性。

:only-child

:only-child 是少数真正的计数选择器之一，因为它仅在元素的父元素有一个子元素时应用。使用您的理想化示例，它的行为可能类似于children(1)。

:nth-child

:nth-child 选择器实际上可能会将您带到您想去的地方，具体取决于您真正想要做什么。如果你想在有 8 个孩子的情况下为所有元素设置样式，那你就不走运了。但是，如果您想将样式应用于第 8 个及以后的元素，请尝试以下操作：

p:nth-child( n + 8 ){
    /* add styles to make it pretty */
}

很遗憾，这些可能不是您正在寻找的解决方案。最后，您可能需要使用一些 Javascript 魔法来根据计数应用样式 - 即使您要使用其中一种，您也需要在使用纯浏览器之前仔细查看浏览器兼容性CSS 解决方案。

W3 CSS3 Spec on pseudo-classes

编辑我对您的问题的理解略有不同 - 还有其他几种方法可以设置 父项 的样式，而不是子项。让我按照你的方式扔一些其他选择器：

:empty 和 :not

这会为没有子元素的元素设置样式。单独使用并没有多大用处，但与 :not 选择器搭配使用时，您只能设置具有子元素的元素：

div:not(:empty) {
    /* We know it has stuff in it! */
}

你无法计算这里有多少个纯 CSS 可用的子元素，但它是另一个有趣的选择器，可以让你做一些很酷的事情。

Answer 3

注意：此解决方案将返回特定长度的集合的子元素，而不是您所要求的父元素。希望它仍然有用。

Andre Luis 想出了一个方法：http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ 不幸的是，它只适用于 IE9 及更高版本。

本质上，您将 :nth-child() 与其他处理元素位置的伪类结合起来。这种方法允许您从 具有特定长度的元素集合中指定元素。

例如:nth-child(1):nth-last-child(3) 匹配集合中的第一个元素，同时也是集合末尾的第三个元素。这做了两件事：保证集合只有三个元素，并且我们拥有三个元素中的第一个。要指定三元素集中的第二个元素，我们将使用:nth-child(2):nth-last-child(2)。

示例 1 - 如果 set 包含三个元素，则选择所有列表元素：

li:nth-child(1):nth-last-child(3),
li:nth-child(2):nth-last-child(2),
li:nth-child(3):nth-last-child(1) {
    width: 33.3333%;
}

示例 1 替代方案来自 Lea Verou：

li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
    width: 33.3333%;
}

示例 2 - 使用三个列表元素定位集合的最后一个元素：

li:nth-child(3):last-child {
    /* I'm the last of three */
}

示例 2 替代方案：

li:nth-child(3):nth-last-child(1) {
    /* I'm the last of three */
}

示例 3 - 以四个列表元素为目标集合的第二个元素：

li:nth-child(2):nth-last-child(3) {
    /* I'm the second of four */
}

Answer 4

根据 Matt 的解决方案，我使用了以下 Compass/SCSS 实现。

@for $i from 1 through 20 {
    li:first-child:nth-last-child( #{$i} ),
    li:first-child:nth-last-child( #{$i} ) ~ li {
      width: calc(100% / #{$i} - 10px);
    }
  }

这使您可以快速扩展项目的数量。

Answer 5

如果你打算用纯 CSS（使用 scss）来做，但你在同一个父类中有不同的元素/类，你可以使用这个版本！！

  &:first-of-type:nth-last-of-type(1) {
    max-width: 100%;
  }

  @for $i from 2 through 10 {
    &:first-of-type:nth-last-of-type(#{$i}),
    &:first-of-type:nth-last-of-type(#{$i}) ~ & {
      max-width: (100% / #{$i});
    }
  }

Answer 6

是的，我们可以像这样使用nth-child 来做到这一点：

div:nth-child(n + 8) {
    background: red;
} 

这将使第 8 个div 以后的孩子变为red。希望这会有所帮助...

另外，如果有人说“嘿，他们不能用 css 来做样式，用 JS！”立即怀疑他们。 CSS 现在非常灵活

.container div {
  background: blue;
}

.container div:nth-child(n + 8) {
  background: red;
}

<div class="container">
  <div>div 1</div>
  <div>div 2</div>
  <div>div 3</div>
  <div>div 4</div>
  <div>div 5</div>
  <div>div 6</div>
  <div>div 7</div>
  <div>div 8</div>
  <div>div 9</div>
  <div>div 10</div>
  <div>div 11</div>
  <div>div 12</div>
</div>

在示例中，前 7 个孩子是蓝色的，然后是 8 个以后的孩子是红色的......

[外部示例]

Answer 7

不，CSS 中没有这样的东西。但是，您可以使用 JavaScript 计算子元素的数量并应用样式。

Answer 8

如果您正在寻找一种方法来设置所有元素的样式，如果存在超过 N 个（例如 2 个或更多）：

li:first-child:nth-last-child(n+2),
li:first-child:nth-last-child(n+2) ~ li {
  background-color: red;
}

<ul>
  <li>first</li>
</ul>

<ul>
  <li>first</li>
  <li>second</li>
</ul>

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>