<ul id="oigku"></ul>

css選擇器中:first-child與:first-of-type的區別

omgdog 發布于2019-04-23 11:54 / 1037人閱讀

摘要：選擇器是中定義的選擇器，從字面意思上來看也很好理解，就是第一個子元素。這里有兩個為的子元素，匹配到的是第一個。同樣類型的選擇器和和也可以這樣去理解。文章乃參考轉載其他博客所得，僅供自己學習作筆記使用

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

1 <div>
2     <p>第一個子元素p>
3     <h1>第二個子元素h1>
4     <span>第三個子元素span>
5     <span>第四個子元素span>
6 div>

p:first-child? 匹配到的是p元素,因為p元素是div的第一個子元素；

h1:first-child? 匹配不到任何元素，因為在這里h1是div的第二個子元素，而不是第一個；

span:first-child? 匹配不到任何元素，因為在這里兩個span元素都不是div的第一個子元素；

:first-child? 匹配到的是p元素,因為在這里div的第一個子元素就是p。

然后，在css3中又定義了:first-of-type這個選擇器，這個跟:first-child有什么區別呢？還是看那段代碼：

1 <div>
2     <p>第一個子元素p>
3     <h1>第二個子元素h1>
4     <span>第三個子元素span>
5     <span>第四個子元素span>
6 div>

p:first-of-type? 匹配到的是p元素,因為p是div的所有為p的子元素中的第一個，事實上這里也只有一個為p的子元素；

h1:first-of-type? 匹配到的是h1元素，因為h1是div的所有為h1的子元素中的第一個，事實上這里也只有一個為h1的子元素；

span:first-of-type? 匹配到的是第三個子元素span。這里div有兩個為span的子元素，匹配到的是第一個。

:first-of-type? 匹配到的是p元素

所以，通過以上兩個例子可以得出結論：

:first-child 匹配的是某父元素的第一個子元素，可以說是結構上的第一個子元素。

:first-of-type 匹配的是該類型的第一個，類型是指什么呢，就是冒號前面匹配到的東西，比如 p:first-of-type，就是指所有p元素中的第一個。這里不再限制是第一個子元素了，只要是該類型元素的第一個就行了，當然這些元素的范圍都是屬于同一級的，也就是同輩的。

同樣類型的選擇器 :last-child? 和 :last-of-type、:nth-child(n)? 和? :nth-of-type(n) 也可以這樣去理解。

文章乃參考、轉載其他博客所得，僅供自己學習作筆記使用！！！

云服務器 GPU云服務器 css與html的區別 html與css的區別 html與css區別 js選擇器中+

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1337.html

CSS選擇器

###CSS選擇器 CSS3選擇器規范地址： https://www.w3.org/TR/2011/REC-css3-selectors-20110929/ CSS3選擇最新選擇器規范: https://www.w3.org/TR/selectors !---問題---! 　　1.css的全稱是什么？　　　　Cascading style sheets 　　2.樣式表的組成...

Bryan 2019-04-23 13:13 評論0 收藏0
CSS節選——選擇器

摘要：，，層疊樣式表，請留意層疊概念。為了區分偽類和偽元素，偽元素采用雙冒號寫法。常見偽類。常見偽元素。和偽元素的用法和下特有的，用于在渲染中向元素邏輯上的頭部或尾部添加內容。CSS，cascading style sheet，層疊樣式表，請留意層疊概念。 css3為了區分偽類和偽元素，偽元素采用雙冒號寫法。常見偽類——:hover,:link,:active,:targ...

番茄西紅柿 2019-04-23 13:42 評論0 收藏0
偽類和偽元素的區別

摘要：偽元素用于將特殊的效果添加到某些選擇器。因此，偽類與偽元素的區別在于有沒有創建一個文檔樹之外的元素。偽類代表了一組兄弟元素中的第一個元素。偽類的實質就是把某種幻想類關聯到某種偽類相關的元素中。在css2中是這樣定義二者的： CSS 偽類用于向某些選擇器添加特殊的效果。CSS 偽元素用于將特殊的效果添加到某些選擇器。偽類存在的意義是為了通過選擇器找到那些不存在DOM樹中的信息以及不...

starsfun 2019-08-29 15:09 評論0 收藏0
我終于理解了偽類和偽元素

摘要：偽類和偽元素，對于絕大多數同學來說，都是耳熟能詳的名字，但確實又有很多人搞不清楚它們之間的區別，以致于混淆概念。除了上面這個本質區別以外，在中，偽類用單冒號表示而偽元素用雙冒號表示。 showImg(https://segmentfault.com/img/bV4WC1?w=510&h=310); 偽類和偽元素，對于絕大多數同學來說，都是耳熟能詳的名字，但確實又有很多人搞不清楚它們之間...

張遷 2019-08-30 14:05 評論0 收藏0
CSS3主要內容

摘要：必須要準確的放置否則聲明無效。倒影設置元素的倒影準確的來說不能算是的東西，但需要知道。默認值不可繼承背景漸變漸變是在中新增加的圖片類型使用漸變可以在兩種顏色間制造出平滑的漸變效果用它代替圖片，可以加快頁面的載入時間減小帶寬占用。 CSS3主要內容一、CSS選擇器 ? CSS3選擇器規范地址： https://www.w3.org/TR/2011/RE...? ...

X_AirDu 2019-08-30 11:15 評論0 收藏0