如果你打算用纯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});
    }
  }

如果你正在寻找一种方法来样式所有元素，如果超过N个存在(例如2个或更多):

李:first-child nth-last-child (n + 2), 李:第一个孩子:nth-last-child(n+2) ~ li background-color:红; 的 <德> < li >第一< / li > < /德> <德> < li >第一< / li > < li >第二< / li > < /德> <德> < li >第一< / li > < li >第二< / li > < li >第三< / li > < /德>

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

:独生子女

only-child是少数几个真正的计数选择器之一，因为它只在元素的父元素有一个子元素时才被应用。用你理想化的例子，它的行为就像孩子(1)可能会做的那样。

:nth-child

n -child选择器可能会让你到达你想去的地方，这取决于你真正想要做什么。如果有8个子元素，你想对所有元素都设置样式，那你就不走运了。然而，如果你想要对第8个及以后的元素应用样式，试试这个:

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

不幸的是，这些可能不是你想要的解决方案。最后，您可能需要使用一些Javascript魔法来应用基于计数的样式——即使您要使用其中之一，在使用纯CSS解决方案之前，您也需要仔细考虑浏览器兼容性。

关于伪类的CSS3规范

编辑我对你的问题有一些不同的理解——有一些其他的方法来设置父对象的样式，而不是子对象。让我给你一些其他的选择器:

:空和:not

这将设置没有子元素的样式。它本身并不是很有用，但是当与:Not选择器配对时，你只能对有子元素进行样式化:

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

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

现在我们可以使用:has()选择器来标识条目的数量，并将样式应用到容器中

.container { height: 50px; margin: 10px; } .container:not(:has(*)) { /* 0 elements */ background: yellow; } .container:has(> :last-child:nth-child(1)) { /* 1 element */ background: red; } .container:has(> :last-child:nth-child(2)) { /* 2 elements */ background: blue; } .container:has(> :last-child:nth-child(3)) { /* 3 elements */ background: green; } /* For N elements .container:has(> :last-child:nth-child(N)) { background: red; } */ <div class="container"> </div> <div class="container"> <div></div> </div> <div class="container"> <div></div> <div></div> </div> <div class="container"> <div></div> <div></div> <div></div> </div>

你可以像这样使用:has选择器:

.parent-element:has(:nth-child(8))

它选择子元素号为8的.parent-element类的元素。如果子数字8不存在，规则将不被应用。

不幸的是:has在firefox中默认不支持。您仍然可以使用它，并为firefox支持添加额外的棘手规则。

是的，我们可以像这样使用n -child:

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

这将使第8 div子div变成红色。希望这对你有所帮助……

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

.container div { 背景:蓝色; ｝ .container div:n -child(n + 8) { 背景:红色; ｝ < div class = "容器" > < 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个孩子是红色的……

(外部的例子)