成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css選擇器中:first-child與:first-of-type的區(qū)別

omgdog / 1054人閱讀

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

: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有什么區(qū)別呢？還是看那段代碼：

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元素

?

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

:first-child 匹配的是某父元素的第一個子元素，可以說是結(jié)構(gòu)上的第一個子元素。

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

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

文章乃參考、轉(zhuǎn)載其他博客所得，僅供自己學習作筆記使用！?。?/span>

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1337.html

相關(guān)文章

  • CSS選擇器

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

    Bryan 評論0 收藏0

  • CSS節(jié)選——選擇器

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

    番茄西紅柿 評論0 收藏0

  • 偽類和偽元素的區(qū)別

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

    starsfun 評論0 收藏0

  • 我終于理解了偽類和偽元素

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

    張遷 評論0 收藏0

  • CSS3主要內(nèi)容

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

    X_AirDu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<