CSS实现根据子元素数量应用不同样式

欢迎访问个人博客： www.iamsee.top

在前端的页面布局中经常会出现在子元素个数使用不同的样式的需求，比如文章列表，在较少内容下单列表现，而在元素内容较多时使用双列表现。再比如在页面排版上，可以根据元素内容的多少来修改内容的缩放，位置，颜色等样式

:has() 选择器简介

: has()选择器中的括号传递一个选择器参数，如果选择器匹配上了元素就会应用后面的样式，例如：

<div>
	div
</div>

<div>
	<h1>h1</h1>
	div
</div>

div{
   
	border:1px solid #000;
	margin:1em;
}

div:has(h1){
   
	background-color:red;
}

显示结果

:has() + :nth-child ()

现在我们知道了 :has() 选择器是用来在匹配成功时使用样式的，而加上 :nth-child() 就会有根据子元素数量去匹配样式的效果
例如：

<div class="container">
	<p>p1</p>
</div>

<div class="container">
	<p>p1</p>
	<p>p2</p>
<