nth-child() 和 nth-of-type() 的區別

阿新 • • 發佈：2018-05-04

alt ima 尋找 -o img TP http .com nth

技術分享圖片

p:nth-child(3) 尋找父元素的第三個標簽為p的子元素。

p:nth-of-type(2) 在父元素的子元素中，僅尋找p標簽的第二個元素。

nth-child() 和 nth-of-type() 的區別

head true http doctype 段落元素選擇 ont span x:first-child和x:nth-child(1)功能一樣，首先選中的是x元素，並且x元素必須是它父元素的第一個子元素，選擇器才成立，否則不能選中。其中x也可以是選擇器。由此看出nth-

info 失效 red 選擇器 -c alt 元素分享圖片 light <ul> <li>1</li> <li>2</li> <li>3</li>

alt ima 尋找 -o img TP http .com nth p:nth-child(3) 尋找父元素的第三個標簽為p的子元素。 p:nth-of-type(2) 在父元素的子元素中，僅尋找p標簽的第二個元素。 nth

:nth-child()表示父元素下的第n個子元素。比如div p:nth-child(2)表示div下的第二的元素、如果不是p元素則沒有匹配的元素　:nth-of-type()表示父元素下的第ｎ個型別的元素　比如div p:nth-of-type(2)表示div下的第二個

nbsp 元素段落 -c 之間 css3選擇器子元素差異是個對於p:nth-child選擇器，選擇一個元素如果：這是個段落元素這是父標簽的第二個子元素對於p:nth-of-type選擇器，選擇一個元素如果：選擇父標簽的第二個段落子元素 :nth-o

鏈接 code 如果參考 res ngx target -o pos p:nth-child(2)表示這個元素要是p標簽，且是第二個子元素，是兩個必須滿足的條件。 <section> <div>我是一個普通的div標簽</div>

首先要說明的一點是：css中的偽類選擇器還是少用為妙，複雜的css選擇器（層級關係較深，偽類等）的效能並不好，主要應該影響的還是瀏覽器渲染時候的迴流（reflow）和重繪（repain）的等的效能（個人理解）。然後要講正題啦！ nth-of-type和nth-child這兩個選

1. nth-child 定義和用法 :nth-child(n) 選擇器匹配屬於其父元素的第 n 個子元素，不論元素的型別。n 可以是數字、關鍵詞或公式。 ① n為數字時，n為大於0的整數

首先是二者的區別 :nth-child(n) 是選擇父元素的第n個子元素。 :nth-of-type(n) 是選擇父元素的第n個同類型的子元素舉個例子： <div> <h1>title1</h1>

使用:first-child發現選擇不起效，網上查了發現自己對:first-child和:first-of-type區別的認識不到。 :first-child 匹配父元素的第一個子元素E。 <ul> <li>列表項一</li>

從字面上就很容一理解first-child是結構上的第一個孩子而first-of-type是相同型別的第一個下面來舉例子說明下 <div> <h2></h2> <p></p>//通過P：first-of-t

使用:first-child發現選擇不起效，網上查了發現自己對:first-child和:first-of-type區別的認識不到。 :first-child 匹配父元素的第一個子元素E。列表項一列表項二列表項三列表項四在上述程式碼中，如果我

css3選擇器 block lan strong title 選擇示例紅色 arc 一、:nth-child 1.1 說明 :nth-child(n)選擇器匹配屬於其父元素的第N個子元素，不論元素的類型。n可以是數字、關鍵詞或公式。註意：如果第N個子元素

html css css3 一、:nth-child 1.1 說明 :nth-child(n)選擇器匹配屬於其父元素的第N個子元素，不論元素的類型。n可以是數字、關鍵詞或公式。註意：如果第N個子元素與選擇的元素類型不同則樣

-o class .text java 內容改變選擇 pre type <body> <ul> <div><a href=""></a></div> <li class="b

例項例項1 選擇屬於父元素div的第三個子元素span，以及屬於父元素div的第六個子元素span。 <style> span:nth-child(3){ color: #ff0000; } span:nth

https://blog.csdn.net/erdouzhang/article/details/70842177 最近系統專案，遇到較多表格和 div 需要根據寫樣式的 1.first-child（IE7相容）、last-child（IE8不相容） html： <

前言：我們在碼程式碼的時候，經常會遇到需要給第一個或者最後一個元素新增或刪除樣式，還有一些比較特殊的是選取第幾個元素新增或刪除樣式，下面記錄css選擇器中常見的相鄰兄弟選擇器（+）、子元素選擇器（>）:first-child、:last-child、:n

在css3中，有一系列類似的選擇器，它們在jQuery中也有與之功能相同的用法，所以本文將這些選擇器中典型的2個進行說明，這樣就同時掌握了css3這型別選擇器和jquery這型別選擇器的用法。 nth-child與nth-of-type系列選擇

:first-child選擇器是css2中定義的選擇器，從字面意思上來看也很好理解，就是第一個子元素。比如有段程式碼： <div> <p>第一個元素</p> <h1>第二個元素</h1>