CSS实现根据子元素数量应用不同样式的操作方法

theme: condensed-night-purplehighlight: atelier-cave-light

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

div{
	border:1px solid #000;
	margin:1em;
}
div:has(h1){
	background-color:red;
}

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

.container{
	border:1px solid #000;
	margin:1em;
}
/* default */
.container {
	background-color:#ddd;
}
/* 包含2个p时 */
.container:has(> p:nth-child(2)){
	background-color:#aaa;
}
/* 包含3个p时 */
.container:has(> p:nth-child(3)){
	background-color:red;
}

 <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
   <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <style>
    .container{
      display: flex;
      align-items: center;;
      gap: 1em;
      padding: 1em;
      height: 200px;
    }
    .container > div {
      height: 80%;
      background-color: #ddd;
      display: flex;
      align-items: center;
      justify-content: center;
      flex:auto;
    }
    .container:has( > div:nth-child(5)) > div:nth-child(3){
      background-color:aqua;
      flex:1.2;
      height: 100%;
    }
  </style>

<div class="container">
	<p>Occaecat minim eu sint. Quis exercitation anim ipsum Lorem veniam sint. Proident ea irure id sit eu eu in. Cillum incididunt nisi nisi velit non cupidatat sint veniam minim voluptate voluptate exercitation velit tempor aliquip. Nisi exercitation ullamco aute ea laborum incididunt deserunt minim proident dolor tempor proident voluptate ipsum sit. Reprehenderit mollit exercitation amet cillum et irure est laboris esse excepteur voluptate aute. In in mollit qui aliqua culpa aliquip fugiat nulla occaecat magna id veniam quis.</p>
	<p>Occaecat minim eu sint. Quis exercitation anim ipsum Lorem veniam sint. Proident ea irure id sit eu eu in. Cillum incididunt nisi nisi velit non cupidatat sint veniam minim voluptate voluptate exercitation velit tempor aliquip. Nisi exercitation ullamco aute ea laborum incididunt deserunt minim proident dolor tempor proident voluptate ipsum sit. Reprehenderit mollit exercitation amet cillum et irure est laboris esse excepteur voluptate aute. In in mollit qui aliqua culpa aliquip fugiat nulla occaecat magna id veniam quis.</p>
</div>
<div class="container">
	<p>Occaecat minim eu sint. Quis exercitation anim ipsum Lorem veniam sint. Proident ea irure id sit eu eu in. Cillum incididunt nisi nisi velit non cupidatat sint veniam minim voluptate voluptate exercitation velit tempor aliquip. Nisi exercitation ullamco aute ea laborum incididunt deserunt minim proident dolor tempor proident voluptate ipsum sit. Reprehenderit mollit exercitation amet cillum et irure est laboris esse excepteur voluptate aute. In in mollit qui aliqua culpa aliquip fugiat nulla occaecat magna id veniam quis.</p>
	<p>Occaecat minim eu sint. Quis exercitation anim ipsum Lorem veniam sint. Proident ea irure id sit eu eu in. Cillum incididunt nisi nisi velit non cupidatat sint veniam minim voluptate voluptate exercitation velit tempor aliquip. Nisi exercitation ullamco aute ea laborum incididunt deserunt minim proident dolor tempor proident voluptate ipsum sit. Reprehenderit mollit exercitation amet cillum et irure est laboris esse excepteur voluptate aute. In in mollit qui aliqua culpa aliquip fugiat nulla occaecat magna id veniam quis.</p>
	<p>Occaecat minim eu sint. Quis exercitation anim ipsum Lorem veniam sint. Proident ea irure id sit eu eu in. Cillum incididunt nisi nisi velit non cupidatat sint veniam minim voluptate voluptate exercitation velit tempor aliquip. Nisi exercitation ullamco aute ea laborum incididunt deserunt minim proident dolor tempor proident voluptate ipsum sit. Reprehenderit mollit exercitation amet cillum et irure est laboris esse excepteur voluptate aute. In in mollit qui aliqua culpa aliquip fugiat nulla occaecat magna id veniam quis.</p>
</div>
<style>
.container {
	border: 1px solid #000;
	margin: 1em;
	columns: 1;
}
/* 包含3个p时 */
.container:has(> p:nth-child(3)) {
	columns: 2;
}
</style>