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

Question

CSS能检测出元素的子元素数量吗？我可能在回答我自己的问题，但我非常好奇。我知道CSS可以选择父容器的单个子元素，但是如果它的父容器有一定数量的子容器，那么是否支持对其子容器的样式进行样式设置。例如container:children(8) .child {   //style the children this way if there are 8 children}我知道这听起来很奇怪，但我的经理让我检查一下，我自己还没有找到任何东西，所以我决定在结束搜索前求助于此。

Answer 1

没有。嗯，不太好。有几个选择器可以使您更接近，但可能无法在您的示例中工作，并且没有最好的浏览器兼容性。

: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解决方案之前，也需要仔细检查浏览器兼容性。

W3CSS3关于伪类的规范

编辑我看你的问题有点不同-还有其他几种方法父母不是孩子。让我以你的方式抛出几个选择器：

:empty和:not

这种样式的元素没有子元素。它本身并不那么有用，但是当它与:not选择器，只能对有子元素的元素进行样式设置：

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

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