CSS中nth-child和nth-of-type的简单使用

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>

 

你可能感兴趣的:(CSS中nth-child和nth-of-type的简单使用)