CSS實(shí)現(xiàn)根據(jù)子元素?cái)?shù)量應(yīng)用不同樣式的操作方法
發(fā)布時(shí)間：2023-07-19 16:30:47 作者：chenSee 
我要評論
我要評論在前端的頁面布局中經(jīng)常會出現(xiàn)在子元素個(gè)數(shù)使用不同的樣式的需求，這篇文章主要介紹了CSS實(shí)現(xiàn)根據(jù)子元素?cái)?shù)量應(yīng)用不同樣式的操作方法,需要的朋友可以參考下
theme: condensed-night-purplehighlight: atelier-cave-light
在前端的頁面布局中經(jīng)常會出現(xiàn)在子元素個(gè)數(shù)使用不同的樣式的需求，比如文章列表，在較少內(nèi)容下單列表現(xiàn)，而在元素內(nèi)容較多時(shí)使用雙列表現(xiàn)。再比如在頁面排版上，可以根據(jù)元素內(nèi)容的多少來修改內(nèi)容的縮放，位置，顏色等樣式
:has() 選擇器簡介
: has()選擇器中的括號傳遞一個(gè)選擇器參數(shù)，如果選擇器匹配上了元素就會應(yīng)用后面的樣式，例如：
<div> div </div> <div> <h1>h1</h1> div </div>
div{
border:1px solid #000;
margin:1em;
}
div:has(h1){
background-color:red;
}顯示結(jié)果
:has() + : nth-child ()
現(xiàn)在我們知道了 :has() 選擇器是用來在匹配成功時(shí)使用樣式的，而加上 :nth-child() 就會有根據(jù)子元素?cái)?shù)量去匹配樣式的效果例如：
<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個(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)用樣式
<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>效果：只有在 5 個(gè)及以上子元素的情況下有，某子元素有特定樣式（比如輪播圖場景）
根據(jù)子元素?cái)?shù)量文本分欄
<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個(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- CSS Grid 是一種二維布局系統(tǒng)，可以同時(shí)控制行和列，相比 Flex（一維布局），更適合用在整體頁面布局或復(fù)雜模塊結(jié)構(gòu)中,這篇文章主要介紹了前端CSS Grid 布局詳解,需要的朋2025-04-16
CSS Padding 和 Margin 區(qū)別全解析
CSS 中的 padding 和 margin 是兩個(gè)非?；A(chǔ)且重要的屬性，它們用于控制元素周圍的空白區(qū)域，本文將詳細(xì)介紹 padding 和 margin 的概念、區(qū)別以及如何在實(shí)際項(xiàng)目中使用它們2025-04-07- will-change 是一個(gè) CSS 屬性，用于告訴瀏覽器某個(gè)元素在未來可能會發(fā)生哪些變化，本文給大家介紹CSS will-change 屬性詳解，感興趣的朋友一起看看吧2025-04-07
- 本文給大家分享在 CSS 中，去除a標(biāo)簽（超鏈接）的下劃線的幾種方法，本文給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧2025-04-07
在前端開發(fā)中，CSS（層疊樣式表）不僅是用來控制網(wǎng)頁的外觀和布局，更是實(shí)現(xiàn)復(fù)雜交互和動態(tài)效果的關(guān)鍵技術(shù)之一,隨著前端技術(shù)的不斷發(fā)展，CSS的用法也日益豐富和高級,本文將2025-04-07css中的 vertical-align與line-height作用詳解
文章詳細(xì)介紹了CSS中的`vertical-align`和`line-height`屬性,包括它們的作用、適用元素、屬性值、常見使用場景、常見問題及解決方案，感興趣的朋友跟隨小編一起看看吧2025-03-26淺析CSS 中z - index屬性的作用及在什么情況下會失效
z-index屬性用于控制元素的堆疊順序,值越大,元素越顯示在上層,它需要元素具有定位屬性（如relative、absolute、fixed或sticky），本文給大家介紹CSS 中z - index屬性的作用2025-03-21- 文章詳細(xì)介紹了CSS中的打印媒體查詢@mediaprint包括基本語法、常見使用場景和代碼示例,如隱藏非必要元素、調(diào)整字體和顏色、處理鏈接的URL顯示、分頁控制、調(diào)整邊距和背景等2025-03-18
CSS模擬 html 的 title 屬性(鼠標(biāo)懸浮顯示提示文字效果)
本文介紹了如何使用CSS模擬HTML的title屬性,通過鼠標(biāo)懸浮顯示提示文字效果,通過設(shè)置`.tipBox`和`.tipBox.tipContent`的樣式,實(shí)現(xiàn)了提示內(nèi)容的隱藏和顯示，感興趣的朋友一起2025-03-10
前端 CSS 動態(tài)設(shè)置樣式：:class、:style 等技巧(推薦)
本文介紹了Vue.js中動態(tài)綁定類名和內(nèi)聯(lián)樣式的兩種方法：對象語法和數(shù)組語法,通過對象語法,可以根據(jù)條件動態(tài)切換類名或樣式；通過數(shù)組語法,可以同時(shí)綁定多個(gè)類名或樣式,此外2025-02-26
