• <menu id="wosog"><strong id="wosog"></strong></menu>
  • <nav id="wosog"></nav>
  • <menu id="wosog"></menu>
    400-650-7353

    精品課程

    您所在的位置:首頁 > IT干貨資料 > web前端 > 【Web前端基礎知識】:nth-child()和:nth-of-type()的區別

    【Web前端基礎知識】:nth-child()和:nth-of-type()的區別

    • 發布: Web前端培訓
    • 來源:Web前端干貨資料
    • 2020-09-11 14:59:08
    • 閱讀()
    • 分享
    • 手機端入口

    :nth-child和:nth-of-type都是css3的結構偽類選擇器,和他們相關的還有一堆其他的結構偽類選擇器,如果搞懂了這兩個選擇器的話,相應的也能搞懂和他們相關的其他結構偽類選擇器啦。

    這兩個選擇器,可不像我們看起來的那么簡單,他們的作用相近,卻又不完全一樣。

    定義

    我們先來看下這兩個選擇器的定義:

    :nth-child(n) 選擇器匹配父元素中的第 n 個子元素,元素類型沒有限制。

    :nth-of-type(n)選擇器匹配同類型中的第n個同級兄弟元素。

    n可以是一個數字,一個關鍵字,或者一個公式。

    寫個例子看下:

    1. <!DOCTYPE html> 
    2. <html> 
    3. <head> 
    4.     <meta charset="UTF-8"> 
    5.     <title>:nth-child()和:nth-of-type()的區別</title> 
    6.     <style> 
    7.         .box p:nth-child(2){ 
    8.             color:#fff; 
    9.             background: orange; 
    10.         } 
    11.     </style> 
    12. </head> 
    13. <body> 
    14.     <div class="box"> 
    15.         <h2>我是h2標簽</h2> 
    16.         <p>我是.box里的第二個子元素,我是第一個p標簽</p> 
    17.         <p>我是.box里的第三個子元素,我是第二個p標簽</p> 
    18.     </div> 
    19. </body> 
    20. </html> 

    效果如下:

     

    1. <!DOCTYPE html> 
    2. <html> 
    3. <head> 
    4.     <meta charset="UTF-8"> 
    5.     <title>:nth-child()和:nth-of-type()的區別</title> 
    6.     <style> 
    7.         .box p:nth-of-type(2){ 
    8.             color:#fff; 
    9.             background: orange; 
    10.         } 
    11.     </style> 
    12. </head> 
    13. <body> 
    14.     <div class="box"> 
    15.         <h2>我是h2標簽</h2> 
    16.         <p>我是.box里的第二個子元素,我是第一個p標簽</p> 
    17.         <p>我是.box里的第三個子元素,我是第二個p標簽</p> 
    18.     </div> 
    19. </body> 
    20. </html> 

    效果如下:

    一個是.box p:nth-child(2),一個是.box p:nth-of-type(2),括號里面都2,但是效果卻不同。那么到底這兩個選擇器是什么意思呢?

    分析:

    我們再來看下結構:

    .box的子元素有三個,第一個是h2標簽,第二個和第三個是p標簽。

    1. <div class="box"> 
    2. <h2>我是h2標簽</h2> 
    3.    <p>我是.box里的第二個子元素,我是第一個p標簽</p> 
    4.    <p>我是.box里的第三個子元素,我是第二個p標簽</p> 
    5. </div> 

    .box p:nth-child(2)

    .box p:nth-child(2)的效果是選擇出了第一個p標簽,也就是.box里的第二個子元素。

    翻譯下:

    1.確定了選擇的是.box元素里面的p元素。

    2.選擇的是.box的子元素里面àp元素à的父元素里面的à第二個子元素。

    3.我們來分析下第二點到底是什么意思:”.box的子元素里面àp元素”指的是這兩個元素:

    4.“ p元素à的父元素”指的就是.box這個元素:

    課程好禮申請領取
    您的姓名
    您的電話
    意向課程
     

    中公優就業

    官方QQ

    掃描上方二維碼或點擊一鍵加群,免費領取價值599元網課,加群暗號:599。 一鍵加群

    >>本文地址:
    注:本站稿件未經許可不得轉載,轉載請保留出處及源文件地址。

    推薦閱讀

    優就業:ujiuye

    關注中公優就業官方微信

    • 關注微信回復關鍵詞“大禮包”,領80G學習資料
    QQ交流群
    領取免費網課
    (加群備注“網站”)
    IT培訓交流群 加入群聊 +
    軟件測試 加入群聊 +
    全鏈路UI/UE設計 加入群聊 +
    Python+人工智能 加入群聊 +
    互聯網營銷 加入群聊 +
    Java開發 加入群聊 +
    PHP開發 加入群聊 +
    VR/AR游戲開發 加入群聊 +
    大前端 加入群聊 +
    大數據 加入群聊 +
    Linux云計算 加入群聊 +
    優就業官方微信
    掃碼回復關鍵詞“大禮包”
    領取80G學習資料

    巨劃算
    現在開通
    2020OAO訓練營
    免費試聽
    課程資料、活動優惠 領取通道
     
     
  • <menu id="wosog"><strong id="wosog"></strong></menu>
  • <nav id="wosog"></nav>
  • <menu id="wosog"></menu>
    线上棋牌平台