CSS實作根據子元素數量應用不同樣式

在前端的頁面布局中經常會出現在子元素個數使用不同的樣式的需求，比如文章串列，在較少內容下單串列現，而在元素內容較多時使用雙串列現，再比如在頁面排版上，可以根據元素內容的多少來修改內容的縮放，位置，顏色等樣式

: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 >
	<p>p1</p>
</div>

<div >
	<p>p1</p>
	<p>p2</p>
</div>

<div >
	<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 >
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  
   <div >
    <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>

效果：
只有在 5 個及以上子元素的情況下有，某子元素有特定樣式（比如輪播圖場景）

根據子元素數量文本分欄

<div >
	<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 >
	<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>

顯示效果：

結尾

使用 :has() + :nth-child() 可以在前端頁面中更好的去做頁面布局的自適應，也在內容不足的情況下提供了一種簡單實用的容錯方法，

而在兼容性上除 Firefox 瀏覽器，其他的瀏覽器均有較好的支持，

個人博客： www.iamsee.top

標籤：其他

上一篇：618技術揭秘：探究競速榜頁面核心前端技術

下一篇：返回列表