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

在前端的頁面布局中經(jīng)常會(huì)出現(xiàn)在子元素個(gè)數(shù)使用不同的樣式的需求，比如文章列表，在較少內(nèi)容下單列表現(xiàn)，而在元素內(nèi)容較多時(shí)使用雙列表現(xiàn)。再比如在頁面排版上，可以根據(jù)元素內(nèi)容的多少來修改內(nèi)容的縮放，位置，顏色等樣式

:has() 選擇器簡介

: has()選擇器中的括號(hào)傳遞一個(gè)選擇器參數(shù)，如果選擇器匹配上了元素就會(huì)應(yīng)用后面的樣式，例如：

<p>
	p
</p>
<p>
	<h1>h1</h1>
	p
</p>

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

顯示結(jié)果

:has() + : nth-child ()

現(xiàn)在我們知道了 :has() 選擇器是用來在匹配成功時(shí)使用樣式的，而加上 :nth-child() 就會(huì)有根據(jù)子元素?cái)?shù)量去匹配樣式的效果例如：

<p class="5e76-676f-9f8d-6920 container">
	<p>p1</p>
</p>
<p class="676f-9f8d-6920-1068 container">
	<p>p1</p>
	<p>p2</p>
</p>
<p class="9f8d-6920-1068-2470 container">
	<p>p1</p>
	<p>p2</p>
	<p>p3</p>
</p>

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

顯示效果：

其他使用示例超過一定數(shù)量，某子元素應(yīng)用樣式

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

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

根據(jù)子元素?cái)?shù)量文本分欄

<p class="5394-3e6b-1892-6b71 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>
<p class="3e6b-1892-6b71-a742 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>
</p>
<style>
.container {
	border: 1px solid #000;
	margin: 1em;
	columns: 1;
}
/* 包含3個(gè)p時(shí) */
.container:has(> p:nth-child(3)) {
	columns: 2;
}
</style>

顯示效果：

結(jié)尾

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

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

到此這篇關(guān)于CSS實(shí)現(xiàn)根據(jù)子元素?cái)?shù)量應(yīng)用不同樣式的操作方法的文章就介紹到這了,更多相關(guān)css子元素?cái)?shù)量應(yīng)用不同樣式 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

總結(jié)

以上是生活随笔為你收集整理的CSS实现根据子元素数量应用不同样式的操作方法(css的子元素选择器)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。