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這個元素:

學習疑問申請解答
您的姓名
您的電話
意向課程
 

中公優就業

IT小助手

掃描上方二維碼添加好友,請備注:599,享學習福利。

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

推薦閱讀

優就業:ujiuye

關注中公優就業官方微信

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

測一測
你適合學哪門IT技術?

1 您的年齡

2 您的學歷

3 您更想做哪個方向的工作?

獲取測試結果
 
課程資料、活動優惠 領取通道
 
 
最新上架日本 中文频道,什么网址可以看a片,日韩美女一级毛片,性交的视频,那里有黄色网站