国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

真正理解nth-of-type，只知道nth-of-type和nth-child的區別？怕是不夠哦！

pubdreamcc / 2297人閱讀

摘要：和的區別我這里就不說了，只說。首先我們設定下面這樣一個結構，然后通過下面四個例子真正理解這是這是這是這是這是一通過標簽選擇第個顯然這是符合我們預期的，是廣大人民群眾喜聞樂見的情形。

nth-of-type和nth-child的區別我這里就不說了，只說nth-of-type。

首先我們設定下面這樣一個結構，然后通過下面四個例子真正理解nth-of-type 
1.
這是div

2.
這是div.common

3.
這是p.common

4.
這是div.common

5.
這是p.common
一、通過div標簽選擇第2個div 
div:nth-of-type(2) {
    background: red;
}

顯然這是符合我們預期的，是廣大人民群眾喜聞樂見的情形。

二、通過common類名選擇第3個.common 
.common:nth-of-type(3) {
    background: red;
}


同樣也是符合我們預期的——選中擁有common類名的第三個元素。
可能有些朋友看到這，嘴角已經微微上揚，露出輕蔑而天真的笑容，心想：標題取得咋咋呼呼，結果都是些嘗龜操作，不值一提不值一提~

好，那就來點不那么嘗龜的！

三、通過common類名選擇第1個.common 
.common:nth-of-type(1) {
    background: red;
}


是的，你沒有看錯，我的圖也沒錯，她確實選中了第2個.common，什么原因呢？這個例子暫時看不出來，我們結合下面的第四個例子應該能看出些端倪。

四、通過common類名選擇第2個.common 
.common:nth-of-type(2) {
    background: red;
}


有些朋友看到這更絕望了，明明括號里只有2沒帶n，卻選中了2個！
剛剛露出天真笑容的朋友臉上的笑容凝固了，心想：nth-of-type變了，變得陌生了，不再是我認識的那個單純的nth-of-type了。
但是朋友你不用垂頭喪氣，仔細觀察會發現：這兩個被選中的元素都是.common，但是他們的標簽名卻不同，而且恰好是各自標簽名的第二個！

由此我們大膽推測： 
nth-of-type以類名選擇元素時，會根據第一個擁有此類名的元素的標簽類型（假設為div）來確定候選元素的標簽（div），即使元素未擁有此類名，但只要是此標簽類型（div）就可成為候選元素，然后根據序列號在候選元素中確定一個元素，如果被確定的這個元素也擁有此類名則此元素被選中，否則不選中任何元素；
另外，若擁有此類名的元素標簽類型不同，則將不同標簽分組，分別應用上述規則。

根據這個結論，再看三、四兩個例子，縈繞在我們眼前的迷霧漸漸消散了。

有些朋友可能會猛然想起第二個例子一開始就是符合我們原先的“想當然規則”的，但仔細對比會發現那只是個美麗的巧合，第二個例子仍然符合我們的推論，進一步證明了推論的正確性。

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

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

相關文章

  • nth-child & nth-of-type講解

    摘要：關于的區別，網上很多人的解釋是存在誤區，解釋是不夠清楚的，今天在這里把個人測試過的分享給大家按標簽進行選擇寫法一使用得出的效果如圖使用得出的效果如圖由以上兩個效果圖可知，在父級元素下只有標簽的時候，兩者沒什么區別。 關于nth-child && nth-of-type的區別，網上很多人的解釋是存在誤區，解釋是不夠清楚的，今天在這里把個人測試過的分享給大家 按標簽進行選擇 寫法一： ...

    Binguner 評論0 收藏0

  • nth-child & nth-of-type講解

    摘要：關于的區別，網上很多人的解釋是存在誤區，解釋是不夠清楚的，今天在這里把個人測試過的分享給大家按標簽進行選擇寫法一使用得出的效果如圖使用得出的效果如圖由以上兩個效果圖可知，在父級元素下只有標簽的時候，兩者沒什么區別。 關于nth-child && nth-of-type的區別，網上很多人的解釋是存在誤區，解釋是不夠清楚的，今天在這里把個人測試過的分享給大家 按標簽進行選擇 寫法一： ...

    gityuan 評論0 收藏0

  • nth-child & nth-of-type講解

    摘要：關于的區別，網上很多人的解釋是存在誤區，解釋是不夠清楚的，今天在這里把個人測試過的分享給大家按標簽進行選擇寫法一使用得出的效果如圖使用得出的效果如圖由以上兩個效果圖可知，在父級元素下只有標簽的時候，兩者沒什么區別。 關于nth-child && nth-of-type的區別，網上很多人的解釋是存在誤區，解釋是不夠清楚的，今天在這里把個人測試過的分享給大家 按標簽進行選擇 寫法一： ...

    waterc 評論0 收藏0

  • 用純css實現Tab切換

    摘要：所以當我們思考能否用來實現時還應考慮到的結構，能不能構造出滿足已存在的選擇器的布局。用來實現的好處就是可以盡量大的把組件功能和業務邏輯分離開來，真正做一個組件該做的事，希望越來越好 我們今天用css來實現一個常見的tab切換效果 查看原文可以有更好的排版效果哦 先看效果 https://codepen.io/xboxyan/pe... 前言 哪些簡單的效果可以考慮用css來實現呢，目前...

    hizengzeng 評論0 收藏0

  • CSS偽類偽元素詳解

    摘要：選擇器大致可以分成類基本選擇器，層次選擇器，屬性選擇器，偽類，偽元素。但偽類和偽元素相對比較抽象，稍微有一點點理解上的難度。本篇就是我對偽類和偽元素的理解。 CSS選擇器大致可以分成5類：基本選擇器，層次選擇器，屬性選擇器，偽類，偽元素。基本，層次，屬性選擇器比較容易理解，畢竟它們選擇的對象都屬于DOM中看得見摸得著的元素。但偽類和偽元素相對比較抽象，稍微有一點點理解上的難度。本篇就是...

    lookSomeone 評論0 收藏0

發表評論

0條評論

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