CSS中nth-child和nth-of-type的簡單使用

qingyezhu發表於2016-03-04
CSS
ele:nth-child是查詢父元素下的子元素，包括子元素型別非ele的，當子元素型別不是ele時，則不會進行任何操作；
ele:nth-of-type是查詢父元素下的子元素型別為ele的元素，其是按型別進行選擇，只有元素型別是ele才能進行匹配。
同樣的還有first-child與first-of-type、last-child與last-of-type。

 

 

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JS學習範例</title>
        <style>

            /*取出ul中每一個li前的空格，需要在ul中設定字型大小為0，再到具體的li中設定字型的大小*/
            ul{
                font-size: 0;
            }

            .item{
                border: 1px solid #ccc;
                padding: 15px;
                display: inline-block;
            }
            .item li{
                display: inline-block;
                border: 1px solid #ccc;
                padding: 2px;
            }

            .item li span{
                display: inline-block;
                text-align: center;
                width: 30px;
                height: 30px;
                line-height: 30px;
                border-radius: 15px;
                color: #0722AD;
                background-color: #D6B514;
                font-size: 15px;
            }

            /*nth-child只是在父節點的子節點標籤，當子節點中有非指定的節點時，則跳過*/
            .item1 li:nth-child(3){
                background-color: lime;
            }

            .item2 li:nth-child(n + 6){
                background-color: lime;
            }

            .item3 li:nth-child(-n + 4){
                background-color: lime;
            }


            .item4 li:nth-child(4n + 1){
                background-color: lime;
            }

            .margin-item{
                display: inline-block;
                border: 2px solid #F18806;
                padding: 0;
                margin: 0;
            }

            .margin-item li{
                display: inline-block;
                margin-right: 3px;
            }

            .margin-item li span{
                display: inline-block;
                vertical-align: top;
                border: 2px solid #11A7A0;
                width: 100px;
                height: 30px;
            }

            /*nth-of-type只是在父節點的子節點中同型別標籤*/
            .margin-item li:nth-of-type(5n){
                margin-right: 0;
                margin-bottom: 3px;
            }

            .margin-item li:last-of-type{
                margin-right: 0;
            }

        </style>
    </head>

    <body>
            <h1>nth-child(3)：選擇某元素下的第三個元素</h1>
            <ul class="item item1">
                <li><span>1</span></li>
                <li><span>2</span></li>
                <li><span>3</span></li>
                <li><span>4</span></li>
                <li><span>5</span></li>
                <li><span>6</span></li>
                <li><span>7</span></li>
                <li><span>8</span></li>
                <li><span>9</span></li>
                <li><span>10</span></li>
                <li><span>11</span></li>
                <li><span>12</span></li>
                <li><span>13</span></li>
            </ul>

            <br/>

            <h1>nth-child(n + 6)：選擇第6個元素之後的</h1>
            <ul class="item item2">
                <li><span>1</span></li>
                <li><span>2</span></li>
                <li><span>3</span></li>
                <li><span>4</span></li>
                <li><span>5</span></li>
                <li><span>6</span></li>
                <li><span>7</span></li>
                <li><span>8</span></li>
                <li><span>9</span></li>
                <li><span>10</span></li>
                <li><span>11</span></li>
                <li><span>12</span></li>
                <li><span>13</span></li>
            </ul>

            <br/>

            <h1>nth-child(-n + 4)：選擇第4個元素之前的</h1>
            <ul class="item item3">
                <li><span>1</span></li>
                <li><span>2</span></li>
                <li><span>3</span></li>
                <li><span>4</span></li>
                <li><span>5</span></li>
                <li><span>6</span></li>
                <li><span>7</span></li>
                <li><span>8</span></li>
                <li><span>9</span></li>
                <li><span>10</span></li>
                <li><span>11</span></li>
                <li><span>12</span></li>
                <li><span>13</span></li>
            </ul>

            <br/>

            <h1>nth-child(4n + 1)：間隔3個選一個</h1>
            <ul class="item item4">
                <li><span>1</span></li>
                <li><span>2</span></li>
                <li><span>3</span></li>
                <li><span>4</span></li>
                <li><span>5</span></li>
                <li><span>6</span></li>
                <li><span>7</span></li>
                <li><span>8</span></li>
                <li><span>9</span></li>
                <li><span>10</span></li>
                <li><span>11</span></li>
                <li><span>12</span></li>
                <li><span>13</span></li>
            </ul>

            <br/>

            <h1>nth-child(5n)：每5個換行</h1>
            <ul class="margin-item">
                <li><span>1</span></li>
                <li><span>2</span></li>
                <li><span>3</span></li>
                <li><span></span></li>
                <li><span></span></li><br/>
                <li><span>1</span></li>
                <li><span>2</span></li>
                <li><span>3</span></li>
                <li><span></span></li>
                <li><span></span></li><br/>
                <li><span></span></li>
                <li><span></span></li>
                <li><span></span></li>
            </ul>

    </body>
</html>

 

相關文章