CSS能检测元素的子元素数量吗？

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

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

比如说

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

---

我知道这听起来很奇怪，但我的经理让我检查一下，我自己没有发现任何东西，所以我决定在结束搜索之前求助于so。

不，CSS中没有类似的内容。但是，您可以使用JavaScript来计算子项的数量并应用样式。

是的，我们可以使用第n个子项这样做

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

这将使第八师的孩子变红。希望这有助于

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

例如：

---

在这个例子中，前7个孩子是蓝色的，然后8个孩子是红色的…

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

：独生子女

：only child

是为数不多的真正计数选择器之一，因为它仅在元素的父元素有一个子元素时应用。使用您理想化的示例，它的行为类似于儿童（1）可能会

：第n个子项

：n子项

选择器实际上可能会根据您真正想要做的事情将您带到您想要去的地方。如果你想在有8个孩子的情况下设计所有元素的样式，那你就太倒霉了。但是，如果要将样式应用于第8个及更高版本的图元，请尝试以下操作：

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

不幸的是，这些可能不是您正在寻找的解决方案。最后，您可能需要使用一些Javascript向导来应用基于计数的样式-即使您使用其中一种，在使用纯CSS解决方案之前，您也需要仔细检查浏览器兼容性

编辑我对你的问题的理解有点不同——还有其他几种方式可以塑造父母的风格，而不是孩子的风格。让我向您介绍一些其他选择器：

：空

和

：非

这将为没有子元素的元素设置样式。这本身并不有用，但与

：Not

选择器搭配使用时，您只能为具有子元素的元素设置样式：

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

---

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

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

Andre Luis提出了一种方法：不幸的是，它只适用于IE9及以上版本

本质上，您可以将：nth-child（）与处理元素位置的其他伪类相结合。这种方法允许您从具有特定长度的元素集中指定元素

例如

：第n个子元素（1）：第n个最后一个子元素（3）

匹配集合中的第一个元素，同时也是集合末尾的第三个元素。这做了两件事：保证集合只有三个元素，并且我们有三个元素中的第一个。要指定三元素集中的第二个元素，我们将使用

：第n个子元素（2）：第n个最后一个子元素（2）

示例1-如果集合有三个元素，则选择所有列表元素：

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%;
}

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

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

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

示例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(1):nth-last-child(3),
li:nth-child(2):nth-last-child(2),
li:nth-child(3):nth-last-child(1) {
    width: 33.3333%;
}

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

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

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

示例2备选方案：

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%;
}

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

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

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

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

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%;
}

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

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

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

---

澄清：

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%;
}

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

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

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

由于原始问题中的一个先前的措辞，一些SO公民担心这个答案可能会误导。请注意，在CSS3中，不能根据父节点的子节点数将样式应用于父节点。但是，可以根据子节点的兄弟节点数将样式应用于子节点

---

原始答案：

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%;
}

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

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

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

令人难以置信的是，这完全可以在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%;
}

诀窍是选择第一个孩子，同时也是最后一个孩子的第n个孩子。这将根据兄弟姐妹的数量有效地进行选择

这项技术的成功归功于安德烈·吕斯（被发现）和莱维鲁（被精炼）

---

你不喜欢CSS3吗 利用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);
    }
  }

---

这允许您快速扩展项目的数量。

如果您打算使用纯CSS（使用SCS）进行扩展，但在同一父类中有不同的元素/类，则可以使用此版本

  &: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});
    }
  }

---

也许可以添加一个关于不幸的注释？我不认为这正是Brodie所要求的-这将按照给定的数量对子元素进行样式化，但不能根据其子元素的数量选择祖先/包含元素。虽然这实际上是一些非常好的信息，谢谢alan，但我想说的是，bee是对的“如果一个元素有这么多子元素，我们将使用这种样式“如果我没有弄错的话，你的方法会在第8个孩子身上设置样式，但前7个孩子会很孤独和赤裸。@primatology-唯一不支持第n个孩子的浏览器是IE-1。这不会使div child变红，这会根据其兄弟姐妹中的数字使div变红！与div的孩子没有任何关系@吕布纳：你能解释为什么这不是真的吗？@GabrielSantos（约翰看着一个红苹果）-约翰：我看到一个蓝苹果-麦克斯：不是真的，是红色的-约翰，你能解释一下为什么这不是真的吗？再说一遍，这是兄弟姐妹的数目，不是children@TMS参见接受答案的编辑-OP的问题措辞笨拙。该方法适用于每个元素