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

資訊專欄INFORMATION COLUMN

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

pubdreamcc / 2318人閱讀

摘要：和的區(qū)別我這里就不說(shuō)了，只說(shuō)。首先我們?cè)O(shè)定下面這樣一個(gè)結(jié)構(gòu)，然后通過(guò)下面四個(gè)例子真正理解這是這是這是這是這是一通過(guò)標(biāo)簽選擇第個(gè)顯然這是符合我們預(yù)期的，是廣大人民群眾喜聞樂(lè)見(jiàn)的情形。

nth-of-type和nth-child的區(qū)別我這里就不說(shuō)了，只說(shuō)nth-of-type。

首先我們?cè)O(shè)定下面這樣一個(gè)結(jié)構(gòu)，然后通過(guò)下面四個(gè)例子真正理解nth-of-type 
1.
這是div

2.
這是div.common

3.
這是p.common

4.
這是div.common

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

顯然這是符合我們預(yù)期的，是廣大人民群眾喜聞樂(lè)見(jiàn)的情形。

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


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

好，那就來(lái)點(diǎn)不那么嘗龜?shù)模?/p> 三、通過(guò)common類名選擇第1個(gè).common 

.common:nth-of-type(1) {
    background: red;
}


是的，你沒(méi)有看錯(cuò)，我的圖也沒(méi)錯(cuò)，她確實(shí)選中了第2個(gè).common，什么原因呢？這個(gè)例子暫時(shí)看不出來(lái)，我們結(jié)合下面的第四個(gè)例子應(yīng)該能看出些端倪。

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


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

由此我們大膽推測(cè)： 
nth-of-type以類名選擇元素時(shí)，會(huì)根據(jù)第一個(gè)擁有此類名的元素的標(biāo)簽類型（假設(shè)為div）來(lái)確定候選元素的標(biāo)簽（div），即使元素未擁有此類名，但只要是此標(biāo)簽類型（div）就可成為候選元素，然后根據(jù)序列號(hào)在候選元素中確定一個(gè)元素，如果被確定的這個(gè)元素也擁有此類名則此元素被選中，否則不選中任何元素；
另外，若擁有此類名的元素標(biāo)簽類型不同，則將不同標(biāo)簽分組，分別應(yīng)用上述規(guī)則。

根據(jù)這個(gè)結(jié)論，再看三、四兩個(gè)例子，縈繞在我們眼前的迷霧漸漸消散了。

有些朋友可能會(huì)猛然想起第二個(gè)例子一開(kāi)始就是符合我們?cè)鹊摹跋氘?dāng)然規(guī)則”的，但仔細(xì)對(duì)比會(huì)發(fā)現(xiàn)那只是個(gè)美麗的巧合，第二個(gè)例子仍然符合我們的推論，進(jìn)一步證明了推論的正確性。

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

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

相關(guān)文章

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

    摘要：關(guān)于的區(qū)別，網(wǎng)上很多人的解釋是存在誤區(qū)，解釋是不夠清楚的，今天在這里把個(gè)人測(cè)試過(guò)的分享給大家按標(biāo)簽進(jìn)行選擇寫(xiě)法一使用得出的效果如圖使用得出的效果如圖由以上兩個(gè)效果圖可知，在父級(jí)元素下只有標(biāo)簽的時(shí)候，兩者沒(méi)什么區(qū)別。 關(guān)于nth-child && nth-of-type的區(qū)別，網(wǎng)上很多人的解釋是存在誤區(qū)，解釋是不夠清楚的，今天在這里把個(gè)人測(cè)試過(guò)的分享給大家 按標(biāo)簽進(jìn)行選擇 寫(xiě)法一： ...

    Binguner 評(píng)論0 收藏0

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

    摘要：關(guān)于的區(qū)別，網(wǎng)上很多人的解釋是存在誤區(qū)，解釋是不夠清楚的，今天在這里把個(gè)人測(cè)試過(guò)的分享給大家按標(biāo)簽進(jìn)行選擇寫(xiě)法一使用得出的效果如圖使用得出的效果如圖由以上兩個(gè)效果圖可知，在父級(jí)元素下只有標(biāo)簽的時(shí)候，兩者沒(méi)什么區(qū)別。 關(guān)于nth-child && nth-of-type的區(qū)別，網(wǎng)上很多人的解釋是存在誤區(qū)，解釋是不夠清楚的，今天在這里把個(gè)人測(cè)試過(guò)的分享給大家 按標(biāo)簽進(jìn)行選擇 寫(xiě)法一： ...

    gityuan 評(píng)論0 收藏0

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

    摘要：關(guān)于的區(qū)別，網(wǎng)上很多人的解釋是存在誤區(qū)，解釋是不夠清楚的，今天在這里把個(gè)人測(cè)試過(guò)的分享給大家按標(biāo)簽進(jìn)行選擇寫(xiě)法一使用得出的效果如圖使用得出的效果如圖由以上兩個(gè)效果圖可知，在父級(jí)元素下只有標(biāo)簽的時(shí)候，兩者沒(méi)什么區(qū)別。 關(guān)于nth-child && nth-of-type的區(qū)別，網(wǎng)上很多人的解釋是存在誤區(qū)，解釋是不夠清楚的，今天在這里把個(gè)人測(cè)試過(guò)的分享給大家 按標(biāo)簽進(jìn)行選擇 寫(xiě)法一： ...

    waterc 評(píng)論0 收藏0

  • 用純css實(shí)現(xiàn)Tab切換

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

    hizengzeng 評(píng)論0 收藏0

  • CSS偽類偽元素詳解

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

    lookSomeone 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<