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

資訊專欄INFORMATION COLUMN

【CSS】nth-child 與 nth-of-type辨析

wthee / 1266人閱讀

摘要：和是的兩個(gè)偽選擇器。就是要找第二個(gè)子元素，也就是第二步檢查是否匹配。你以為會匹配到結(jié)果并沒有解釋的查找過程也有兩步找出同標(biāo)記類型下的第個(gè)元素。那么這個(gè)樣式應(yīng)用成功，因?yàn)槠ヅ洹５莿t應(yīng)用失敗，因?yàn)榈睦餂]有。

nth-child 和 nth-of-type是CSS的兩個(gè)偽選擇器。要對相同位置或相似做操作的時(shí)候非常有用。前者的字面意思是選擇第幾個(gè)子元素，后者的字面意思是選擇某類型的第幾個(gè)元素。

首先來看他們的完整格式。

selector:nth-child(an+b)    /* 如 tr:nth-child(3), p:nth-child(2n+1) */
selector:nth-of-type(an+b)   /* 如 p:nth-of-type(3), .info:nth-of-type(2n) */

前面的選擇器（selector）可以是標(biāo)記類型（markup type）,也可以是樣式（style）。后面的序列有不同的表達(dá)，n是從0開始數(shù)起，即0,1,2...，得出來的結(jié)果就是選中的序列。我們分開來一個(gè)個(gè)看。

先看selector部分。an+b我們先簡化為一個(gè)數(shù)字，只選擇第幾個(gè)元素。

p:nth-child(2) 和 .info:nth-child(2) 有什么不同

有如下HTML代碼：


    
ph1

    
ph2

    
ph3

    
ph4

    
ph5

那么上面兩個(gè)css的結(jié)果如下

p:nth-child(2) { /* 樣式生效，背景顯示紅色 */
   background-color: red;
}
.info:nth-child(2) { /* 匹配不到元素，沒有任何效果。你以為會匹配到
ph4
,結(jié)果并沒有 */
    background-color: blue;
}

解釋：nth-child的查找步驟有兩步：

1. 按序列因子找到對應(yīng)子元素
2. 檢查對應(yīng)元素是否與selector匹配

第一步查找是按照序號絕對查找，寫明是第幾個(gè)子元素，就定位到第幾個(gè)元素。nth-child(2)就是要找第二個(gè)子元素，也就是

ph2


第二步檢查selector是否匹配。

ph2

的類型是p，因此上面的第一個(gè)樣式應(yīng)用成功；class有一個(gè)類型是ph，但第二樣式提供的是.info,不匹配。因此應(yīng)用失敗。

p:nth-of-type(2) 和 .info:nth-of-type(2) 有什么不同

同樣的HTML代碼


    
ph1

    
ph2

    
ph3

    
ph4

    
ph5

如下的兩個(gè)樣式

p:nth-of-type(2) { /* 樣式生效，
ph2
 背景顯示紅色 */
   background-color: red;
}
.info:nth-of-type(2) { /* 匹配不到元素，沒有任何效果。你以為會匹配到
ph4
,結(jié)果并沒有 */
    background-color: blue;
}

解釋：nth-of-type的查找過程也有兩步：

1. 找出同標(biāo)記類型下的第n個(gè)元素。
2. 找出匹配selector的元素。

nth-of-type(2)找的是同類型的第2個(gè)元素，這里只有一種類型p，因此找到的是

ph2

。那么p:nth-of-type(2)這個(gè)樣式應(yīng)用成功，因?yàn)?p class="ph">ph2

匹配seletor “p”。但是.info:nth-of-type(2)則應(yīng)用失敗，因?yàn)?p class="ph">ph2

的class里沒有.info。
假設(shè)把HTML代碼改一下，將第二個(gè)的類型改成別的，比如span，即


    
ph1

    ph2
    
ph3

    
ph4

    
ph5

那么.info:nth-of-type(2)就應(yīng)用成功了，匹配到的是

ph3

。它是第二個(gè)p類型元素，而且class包含.info

總結(jié)：
selector:nth-child(n) 找到這樣的元素，它是第n個(gè)子元素，且匹配selector
selector:nth-of-type(n) 找到這樣的元素，它是統(tǒng)一標(biāo)記類型的第n個(gè)元素，且匹配selector

《未完》

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

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

相關(guān)文章

  • 【CSS】nth-child 與 nth-of-type 的元素查找方式

    摘要：和是的兩個(gè)偽選擇符。所以，和的不同之處就是查找元素的方式不同。前者是查找兄弟元素中某個(gè)絕對位置的元素，后者是查找同類型元素中某個(gè)絕對位置的元素。也就是說選擇符與他們的查找方式?jīng)]有關(guān)系。錯(cuò)誤查找第二個(gè)包含的元素。 nth-child和nth-of-type是css的兩個(gè)偽選擇符。應(yīng)用中，這兩者常常容易混淆。這里把它們拿出來仔細(xì)做個(gè)對比，看看這兩者是怎么查找元素的。 nth-child(n...

    鄒強(qiáng) 評論0 收藏0

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

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

    Binguner 評論0 收藏0

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

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

    gityuan 評論0 收藏0

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

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

    waterc 評論0 收藏0

  • CSS-偽類選擇器（未完待續(xù)。。。）

    摘要：滿足結(jié)果的為和，但是不匹配類名為，所以最后匹配結(jié)果為結(jié)果類名順序失效匹配每一級第三個(gè)標(biāo)簽且標(biāo)簽類名為的。匹配所有父級是的元素兄弟節(jié)點(diǎn)選擇器匹配所有緊接著元素之后的元素 子節(jié)點(diǎn)選擇器 :nth-of-type() && :nth-child() :nth-of-type(n) 匹配父節(jié)點(diǎn)下同一級對應(yīng)標(biāo)簽的第n個(gè)節(jié)點(diǎn) (:nth-last-of-type(n)反序) :nth-child...

    未東興 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<