如何使用CSS选择器为包含指定数量子元素的容器设置样式

直接用CSS的:has()选择器结合子元素数量匹配规则即可实现，主流现代浏览器均已支持该特性。

• 第一步先设置容器的默认样式，默认采用justify-content: center
• 第二步通过选择器匹配子元素数量为1、5、6、7的容器，覆盖对齐规则为justify-content: flex-start

完整CSS代码如下：

.container {
  display: flex;
  /* 默认对齐规则，覆盖所有不符合条件的场景 */
  justify-content: center;
  /* 可自行补充其他容器样式 */
  gap: 8px;
  padding: 10px;
  border: 1px solid #eee;
}

/* 匹配规则：子元素仅1个 / 子元素数量为5、6、7 */
.container:has(> .child:only-child),
.container:has(> .child:nth-child(5):nth-last-child(1)),
.container:has(> .child:nth-child(6):nth-last-child(1)),
.container:has(> .child:nth-child(7):nth-last-child(1)) {
  justify-content: flex-start;
}

/* 仅用于测试显示子元素，可删除 */
.child {
  width: 40px;
  height: 40px;
  background-color: #2563eb;
}

上面的匹配规则也可以简写为更简洁的写法，效果完全一致：

.container:has(> .child:only-child),
.container:has(> .child:nth-child(n+5):nth-child(-n+7):nth-last-child(1)) {
  justify-content: flex-start;
}

兼容性说明 #

:has()选择器目前支持Chrome 105+、Firefox 121+、Safari 15.4+版本，覆盖90%以上的全球用户。如果需要兼容更低版本浏览器，可以用JS做兜底：

// 页面加载完成后批量处理容器对齐
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.container').forEach(el => {
    const childNum = el.querySelectorAll('.child').length;
    el.style.justifyContent = [1,5,6,7].includes(childNum) ? 'flex-start' : 'center';
  })
})

// 如果子元素是动态增减的，在子元素更新后调用一次上述逻辑即可

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