工作時遇到這樣一個問題:根據某元素所包含的子元素個數，分別設置不同的樣式，這個用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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。