成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

pubdreamcc / 2397人閱讀

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

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

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

2.
這是div.common

3.
這是p.common

4.
這是div.common

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

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

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


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

好，那就來點不那么嘗龜?shù)模?/p> 三、通過common類名選擇第1個.common 

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


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

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


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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/116262.html

相關(guān)文章

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

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

    Binguner 評論0 收藏0

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

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

    gityuan 評論0 收藏0

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

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

    waterc 評論0 收藏0

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

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

    hizengzeng 評論0 收藏0

  • CSS偽類偽元素詳解

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

    lookSomeone 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<