工作時(shí)遇到這樣一個(gè)問(wèn)題:根據(jù)某元素所包含的子元素個(gè)數(shù)，分別設(shè)置不同的樣式，這個(gè)用js可以解決，不過(guò)個(gè)人認(rèn)為用css解決可能更簡(jiǎn)單一點(diǎn)。這也正好加深了我對(duì)css選擇器的理解和運(yùn)用。

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只有一個(gè)子元素的樣式*/

li:nth-last-child(1):first-child{

width:100%;

}

/*ul有2個(gè)子元素的樣式*/

/*li:nth-last-child(2):first-child, 是倒數(shù)第二個(gè)元素，又是第一個(gè)元素，說(shuō)明li的父元素ul有2個(gè)子元素(起到了 判斷某父元素下有幾個(gè)子元素 的作用)*/

li:nth-last-child(2):first-child,

/* ~ 選擇位于li:nth-last-child(2):first-child 即 第一個(gè)子元素之后的元素*/

li:nth-last-child(2):first-child ~ li{

width:calc(100% / 2);

}

/*ul有3個(gè)子元素的樣式*/

/*第一個(gè)元素寬度為1/3，字體顏色為藍(lán)色*/

li:nth-last-child(3):first-child{

width:calc(100% / 3);

color:blue;

}

/*第一個(gè)元素之后的第一個(gè)元素(即 有3個(gè)子元素的ul 的 第 3 個(gè)元素)*/

li:nth-last-child(3):first-child ~ li:nth-last-child(1){

width:calc(100% / 4);

color:red;

}

/*第一個(gè)元素之后的第一個(gè)元素(即 有3個(gè)子元素的ul 的 第 2 個(gè)元素)*/

li:nth-last-child(3):first-child ~ li:nth-last-child(2){

width:calc(100% / 6);

color:yellow;

}

• 11111

• 11111
• 22222

• 11111
• 22222
• 33333

總結(jié)

以上是生活随笔為你收集整理的html div父集子集,抛砖引玉css系列---根据父元素包含的子元素个数，实现不同的样式...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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