如果存在x个或更多孩子，则使用css3定位所有孩子？

Question

如果存在 x 或更多的孩子，我一直在努力寻找所有孩子。

如果存在 x 个孩子或更多孩子，我希望能够定位所有子元素。

到目前为止，如果 x 的孩子数量（请参阅.example-1），并且我可以定位所有孩子能够针对 x 个孩子（请参见.example-2）之后的孩子。

但是，如果存在 .example-3 或更多列表项，我需要x来定位所有列表项。

查看所有示例以及准备就绪的.example-3样板。 https://jsfiddle.net/joshmoto/vghawo83/

/* if 3 li's exist make all li's red */

.example-1 {
  LI:first-child:nth-last-child(3),
  LI:first-child:nth-last-child(3)~LI {
    background: red;
  }
}

/* make all li's red after the second li */

.example-2 {
  LI:nth-child(n + 2) {
    background: red;
  }
}

/* if 3 or more li's exist make all li's red */

.example-3 {
  LI {
    /* Need help with this one please */
  }
}

如果可能的话，那么我的.example-3最终结果将如下所示……

示例3-如果存在3个或更多li，则将所有li变成红色

Answer 1

仅使用CSS 还还是不可能的，但是将来使用:has()可以实现 。

.example:has(> li:nth-child(3)) > li {
  /* styles for direct child <li> elements when there are at least 3 of them */
}

现在，您需要使用JS来检测有多少<li>个元素，然后将一个类添加到父级以应用样式。