CSS可以检测元素包含的子级数目吗?

CSS

梅猿

2020-03-23

我可能在回答自己的问题,但我很好奇。

我知道CSS可以选择父级的单个子级,但是如果其父级有一定数量的子级,则可以支持样式化容器的子级。

例如

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

我知道这听起来很奇怪,但是我的经理要求我检查一下,自己没有发现任何东西,因此我决定在结束搜索之前转向SO。

第2975篇《CSS可以检测元素包含的子级数目吗?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

5个回答
Tony猪猪 2020.03.23

不,CSS中没有类似的东西。但是,您可以使用JavaScript计算子级数并应用样式。

西里Near 2020.03.23

基于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);
    }
  }

这使您可以快速扩展项目数。

老丝 2020.03.23

不,不是。有几个选择器可以使您稍微接近一些,但可能无法在您的示例中使用,并且没有最佳的浏览器兼容性。

: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解决方案。

W3 CSS3伪类规范

编辑我对您的问题的理解有所不同-还有几种其他方式可以设置父级而不是子级。让我以其他方式选择其他选择器:

:empty:not

这将设置没有子元素的样式。它本身并不是很有用,但是当与:not选择器配对时,您只能设置具有子元素的元素的样式:

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

您无法在此处计算出多少个纯CSS可用的子代,但这是另一个有趣的选择器,它使您可以做一些很酷的事情。

凯小胖 2020.03.23

如果要使用纯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});
    }
  }
小卤蛋Stafan 2020.03.23

是的,我们可以像这样使用nth-child来做到这一点

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

这将使第8个div子项开始变红。希望这可以帮助...

另外,如果有人说过“嘿,使用CSS样式无法完成操作,请使用JS !!!” 立即怀疑他们。如今,CSS非常灵活

范例:: http://jsfiddle.net/uWrLE/1/

在示例中,前7个孩子是蓝色的,然后8个以上孩子是红色的...

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android