本文翻译自：Can CSS detect the number of children an element has?

I'm probably answering my own question, but I'm extremely curious. 我可能在回答自己的问题，但我很好奇。

I know that CSS can select individual children of a parent, but is there support to style the children of a container, if its parent has a certain amount of children. 我知道CSS可以选择父级的各个子级，但是如果其父级有一定数量的子级，则可以支持样式化容器的子级。

for example 例如

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

I know it sounds weird, but my manager asked me to check it out, haven't found anything on my own so I decided to turn to SO before ending the search. 我知道这听起来很奇怪，但是我的经理要求我检查一下，自己还没有找到任何东西，因此我决定在结束搜索之前转向SO。

#1楼

参考：https://stackoom.com/question/AAIb/CSS可以检测元素包含的子级数目吗

#2楼

NOTE: This solution will return the children of sets of certain lengths, not the parent element as you have asked. 注意：此解决方案将返回某些长度的子集，而不是您要求的父元素。 Hopefully, it's still useful. 希望它仍然有用。

Andre Luis came up with a method: http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ Unfortunately, it only works in IE9 and above. Andre Luis提出了一种方法： http : //lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/不幸的是，它仅在IE9及更高版本中有效。

Essentially, you combine :nth-child() with other pseudo classes that deal with the position of an element. 本质上，您将：nth-child（）与其他处理元素位置的伪类组合在一起。 This approach allows you to specify elements from sets of elements with specific lengths . 这种方法允许您从具有特定长度的元素集中指定元素。

For instance :nth-child(1):nth-last-child(3) matches the first element in a set while also being the 3rd element from the end of the set. 例如:nth-child(1):nth-last-child(3)匹配集合中的第一个元素，同时也是集合末尾的第三个元素。 This does two things: guarantees that the set only has three elements and that we have the first of the three. 这有两件事：确保集合仅包含三个元素，并且我们拥有三个元素中的第一个。 To specify the second element of the three element set, we'd use :nth-child(2):nth-last-child(2) . 要指定三个元素集的第二个元素，我们将使用:nth-child(2):nth-last-child(2) 。

Example 1 - Select all list elements if set has three elements: 示例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%;
}

Example 1 alternative from Lea Verou: Lea Verou的示例1替代方案 ：

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

Example 2 - target last element of set with three list elements: 示例2-使用三个列表元素定位set的最后一个元素：

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

Example 2 alternative: 示例2的替代方法：

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

Example 3 - target second element of set with four list elements: 示例3-使用set的第二个元素作为目标，其中包含四个列表元素：

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

#3楼

Clarification: 澄清：

Because of a previous phrasing in the original question, a few SO citizens have raised concerns that this answer could be misleading. 由于原始问题的先前措辞，一些SO公民提出了对此答案可能产生误解的担忧。 Note that, in CSS3, styles cannot be applied to a parent node based on the number of children it has. 请注意，在CSS3中，无法根据样式的子级数将样式应用于父节点 。 However, styles can be applied to the children nodes based on the number of siblings they have. 但是，可以根据子节点具有的兄弟节点数将样式应用于子节点。

Original answer: 原始答案：

Incredibly, this is now possible purely in 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%;
}

The trick is to select the first child when it's also the nth-from-the-last child. 诀窍是在第一个孩子也是第n个孩子时选择第一个孩子。 This effectively selects based on the number of siblings. 这有效地根据兄弟姐妹的数量进行选择。

Credit for this technique goes to André Luís (discovered) & Lea Verou (refined). 这种技术值得称赞的是AndréLuís（已发现）和Lea Verou（已提炼）。

Don't you just love CSS3? 您不只是喜欢CSS3吗？ 😄 😄

CodePen Example: CodePen示例：

http://codepen.io/mattlubner/pen/RWPYdx http://codepen.io/mattlubner/pen/RWPYdx

Sources: 资料来源：

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

#4楼

Working off of Matt's solution, I used the following Compass/SCSS implementation. 基于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);
    }
  }

This allows you to quickly expand the number of items. 这使您可以快速扩展项目数。

#5楼

If you are going to do it in pure CSS (using scss) but you have different elements/classes inside the same parent class you can use this version!! 如果要使用纯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});
    }
  }

#6楼

No, there is nothing like this in CSS. 不，CSS中没有类似的东西。 You can, however, use JavaScript to calculate the number of children and apply styles. 但是，您可以使用JavaScript计算子级数并应用样式。