css判斷子元素個數

這次給大家帶來css判斷子元素個數，css判斷子元素個數的注意事項有哪些，下面就是實戰案例，一起來看一下。
工作時遇到這樣一個問題:根據某元素所包含的子元素個數，分別設置不同的樣式，這個用js可以解決，不過個人認為用css解決可能更簡單一點。這也正好加深了我對css選擇器的理解和運用。
demo如下：


效果圖如下

完整代碼如下：
css3
*{
box-sizing:border-box;
}
ul{
width:100%;
margin:0;
padding:0;
font-size: 0;
}
li{
margin:0;
padding:0;
display:inline-block;
vertical-align: top;
font-size: 13px;
border:1px solid red;
height:30px;
}
/*ul只有一個子元素的樣式*/
li:nth-last-child(1):first-child{
width:100%;
}
/*ul有2個子元素的樣式*/
/*li:nth-last-child(2):first-child, 是倒數第二個元素，又是第一個元素，說明li的父元素ul有2個子元素(起到了 判斷某父元素下有幾個子元素 的作用)*/
li:nth-last-child(2):first-child,
/* ~ 選擇位於li:nth-last-child(2):first-child 即 第一個子元素之後的元素*/
li:nth-last-child(2):first-child ~ li{
width:calc(100% / 2);
}
/*ul有3個子元素的樣式*/
/*第一個元素寬度為1/3，字體顏色為藍色*/
li:nth-last-child(3):first-child{
width:calc(100% / 3);
color:blue;
}
/*第一個元素之後的第一個元素(即 有3個子元素的ul 的 第 3 個元素)*/
li:nth-last-child(3):first-child ~ li:nth-last-child(1){
width:calc(100% / 4);
color:red;
}
/*第一個元素之後的第一個元素(即 有3個子元素的ul 的 第 2 個元素)*/
li:nth-last-child(3):first-child ~ li:nth-last-child(2){
width:calc(100% / 6);
color:yellow;
}

11111

11111

22222

11111

22222

33333

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！
推薦閱讀：
毛毛蟲爬行動畫怎樣實現
Canvas制作旋轉太極的動畫





創作打卡挑戰賽


贏取流量/現金/CSDN周邊激勵大獎