:last-child與:last-of-type你只是會用，有研究過區別嗎？

weixin_33716557發表於2017-06-19
AST

:last-child與:last-of-type

同學們遇到過給同一組元素的最後一個元素設定css失效的情況嗎？我遇到過，當時使用:last-child居然不起作用，看到名字不科學啊，明明是“最後一個元素”，那為什麼設定CSS失效呢？今天來一探究竟吧

  • 先看一組:last-child正常工作的程式碼
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>:last-child、:last-of-type</title>
        <script src="../../lib/jquery-2.1.0.js"></script>
        <style>
            ul {
                margin: 100px 0;
            }

            li {
                list-style: circle;
                border-bottom: 1px solid #000000;
            }

            li:last-child {
                border-color: red;
            }
        </style>

    </head>

    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <!--<p>我是來騷擾的</p>-->
        </ul>
    </body>

</html>
效果圖1
  • 再先看一組:last-child不正常工作的程式碼
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>:last-child、:last-of-type</title>
        <script src="../../lib/jquery-2.1.0.js"></script>
        <style>
            ul {
                margin: 100px 0;
            }

            li {
                list-style: circle;
                border-bottom: 1px solid #000000;
            }

            li:last-child {
                border-color: red;
            }
        </style>

    </head>

    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <p>我是來騷擾的</p>
        </ul>
    </body>

</html>
效果圖2

問題丟擲來了，那麼來研究下:last-child和:last-of-type究竟是何方神聖。

  1. :last-child：The last-child CSS pseudo-class represents the last element among a group of sibling elements.（:last-child這個css偽類代表的一組兄弟元素當中最後一個元素）但經過程式碼發現，它說的一組元素應該是指其父元素的所有子元素且型別為:last-child前面指定的型別的一組元素。

  2. :last-of-type：The last-of-type CSS pseudo-class represents the last element of its type among a group of sibling elements.（:last-of-type這個css偽類代表其型別的一組兄弟元素中的最後一個元素）所以它指的是和:last-of-type前面的元素型別一致的一組元素的最後一個元素

同理：:nth-last-child和:nth-last-of-type的區別在於父元素的子元素中且與:nth-last-child前面的元素型別一致的最後一個元素

做個驗證

  • :nth-last-child可以正常工作的程式碼
  <!DOCTYPE html>
  <html>
    <head>
        <meta charset="UTF-8">
        <title>:last-child、:last-of-type</title>
        <script src="../../lib/jquery-2.1.0.js"></script>
        <style>
            ul {
                margin: 100px 0;
            }
            
            li {
                list-style: circle;
                border-bottom: 1px solid #000000;
            }
            li:nth-last-child(1){
                border-color: red;
            }
            
        </style>

    </head>

    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <!--<p>我是來騷擾的</p>-->
        </ul>
    </body>

  </html>
效果圖3
  • :nth-last-child不能正常工作的程式碼
 <!DOCTYPE html>
  <html>
    <head>
        <meta charset="UTF-8">
        <title>:last-child、:last-of-type</title>
        <script src="../../lib/jquery-2.1.0.js"></script>
        <style>
            ul {
                margin: 100px 0;
            }
            
            li {
                list-style: circle;
                border-bottom: 1px solid #000000;
            }
        
            
            li:nth-last-child(1){
                border-color: red;
            }
            
        </style>

    </head>

    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <p>我是來騷擾的</p>
        </ul>
    </body>

  </html>
效果圖2
  • 接下來:nth-last-of-type閃亮登場
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>:last-child、:last-of-type</title>
        <script src="../../lib/jquery-2.1.0.js"></script>
        <style>
            ul {
                margin: 100px 0;
            }
            
            li {
                list-style: circle;
                border-bottom: 1px solid #000000;
            }
        
            
            li:nth-last-of-type(1){
                border-color: red;
            }
            
        </style>

    </head>

    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <p>我是來騷擾的</p>
        </ul>
    </body>

</html>
效果圖3

相關文章