如何根据子元素的子元素数量为list类元素设置CSS样式？

你可以通过嵌套使用:has()伪类实现需求：先匹配符合子元素数量条件的.wrapper，再以此为目标匹配它的父元素.list，进而给.list设置样式。

实现代码 #

CSS 代码

/* 当.wrapper下恰好有3个子元素时，给对应的.list设置样式 */
.list:has(.wrapper:has(> :last-child:nth-child(3))) {
  background-color: #f0f0f0;
  padding: 10px;
  border: 1px solid #ccc;
}

对应的HTML结构

<div class='list'>
  <div class='wrapper'>
    <span>Element1</span>
    <span>Element2</span>
    <span>Element3</span>
  </div>
</div>

<!-- 测试用：子元素数量不为3时，不会触发样式 -->
<div class='list'>
  <div class='wrapper'>
    <span>Element1</span>
    <span>Element2</span>
  </div>
</div>

原理说明 #

• > :last-child:nth-child(3)：选中.wrapper的最后一个子元素，且该子元素是父元素的第3个子元素，以此确定.wrapper恰好有3个子元素。
• .wrapper:has(> :last-child:nth-child(3))：匹配符合上述子元素数量条件的.wrapper元素。
• .list:has(...)：匹配包含该.wrapper的.list元素，从而给.list应用样式。

内容的提问来源于stack exchange，提问作者Graf