拋磚引玉css系列---根據父元素包含的子元素個數，實現不一樣的樣式

時間 2019-12-06

原文原文鏈接

工做時遇到這樣一個問題:根據某元素所包含的子元素個數，分別設置不一樣的樣式，這個用js能夠解決，不過我的認爲用css解決可能更簡單一點。這也正好加深了我對css選擇器的理解和運用。
demo以下：css

效果圖以下 html

完整代碼以下：css3

<!DOCTYPE html>
<html>
<head>
    <title>css3</title>
    <style type="text/css">
        *{
            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;
        }
    </style>
</head>
<body>
    <ul class="list">
        <li>11111</li>
    </ul>
    <ul class="list">
        <li>11111</li>
        <li>22222</li>
    </ul>
    <ul class="list">
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
    </ul>
</body>
</html>

註釋中有詳細的說明，再次還要感謝這篇文章：
http://lightcss.com/styling-c...字體

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。