資訊專欄INFORMATION COLUMN
摘要：和是的兩個偽選擇器。就是要找第二個子元素，也就是第二步檢查是否匹配。你以為會匹配到結(jié)果并沒有解釋的查找過程也有兩步找出同標(biāo)記類型下的第個元素。那么這個樣式應(yīng)用成功，因為匹配。但是則應(yīng)用失敗，因為的里沒有。
nth-child 和 nth-of-type是CSS的兩個偽選擇器。要對相同位置或相似做操作的時候非常有用。前者的字面意思是選擇第幾個子元素，后者的字面意思是選擇某類型的第幾個元素。
首先來看他們的完整格式。
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é)果就是選中的序列。我們分開來一個個看。
先看selector部分。an+b我們先簡化為一個數(shù)字，只選擇第幾個元素。
p:nth-child(2) 和 .info:nth-child(2) 有什么不同
有如下HTML代碼：
ph1
ph2
ph3
ph4
ph5
那么上面兩個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匹配
第一步查找是按照序號絕對查找，寫明是第幾個子元素，就定位到第幾個元素。nth-child(2)就是要找第二個子元素，也就是
ph2
ph2
的類型是p，因此上面的第一個樣式應(yīng)用成功；class有一個類型是ph，但第二樣式提供的是.info,不匹配。因此應(yīng)用失敗。p:nth-of-type(2) 和 .info:nth-of-type(2) 有什么不同
同樣的HTML代碼
ph1
ph2
ph3
ph4
ph5
如下的兩個樣式
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個元素。 2. 找出匹配selector的元素。
nth-of-type(2)找的是同類型的第2個元素，這里只有一種類型p，因此找到的是
ph2
。那么p:nth-of-type(2)這個樣式應(yīng)用成功，因為ph2
匹配seletor “p”。但是.info:nth-of-type(2)則應(yīng)用失敗，因為ph2
的class里沒有.info。ph1
ph2ph3
ph4
ph5
那么.info:nth-of-type(2)就應(yīng)用成功了，匹配到的是
ph3
。它是第二個p類型元素，而且class包含.info總結(jié)：
selector:nth-child(n) 找到這樣的元素，它是第n個子元素，且匹配selector
selector:nth-of-type(n) 找到這樣的元素，它是統(tǒng)一標(biāo)記類型的第n個元素，且匹配selector
《未完》
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113028.html
摘要：和是的兩個偽選擇符。所以，和的不同之處就是查找元素的方式不同。前者是查找兄弟元素中某個絕對位置的元素，后者是查找同類型元素中某個絕對位置的元素。也就是說選擇符與他們的查找方式?jīng)]有關(guān)系。錯誤查找第二個包含的元素。 nth-child和nth-of-type是css的兩個偽選擇符。應(yīng)用中，這兩者常常容易混淆。這里把它們拿出來仔細(xì)做個對比，看看這兩者是怎么查找元素的。 nth-child(n...
摘要：關(guān)于的區(qū)別，網(wǎng)上很多人的解釋是存在誤區(qū)，解釋是不夠清楚的，今天在這里把個人測試過的分享給大家按標(biāo)簽進行選擇寫法一使用得出的效果如圖使用得出的效果如圖由以上兩個效果圖可知，在父級元素下只有標(biāo)簽的時候，兩者沒什么區(qū)別。 關(guān)于nth-child && nth-of-type的區(qū)別，網(wǎng)上很多人的解釋是存在誤區(qū)，解釋是不夠清楚的，今天在這里把個人測試過的分享給大家 按標(biāo)簽進行選擇 寫法一： ...
摘要：關(guān)于的區(qū)別，網(wǎng)上很多人的解釋是存在誤區(qū)，解釋是不夠清楚的，今天在這里把個人測試過的分享給大家按標(biāo)簽進行選擇寫法一使用得出的效果如圖使用得出的效果如圖由以上兩個效果圖可知，在父級元素下只有標(biāo)簽的時候，兩者沒什么區(qū)別。 關(guān)于nth-child && nth-of-type的區(qū)別，網(wǎng)上很多人的解釋是存在誤區(qū)，解釋是不夠清楚的，今天在這里把個人測試過的分享給大家 按標(biāo)簽進行選擇 寫法一： ...
摘要：關(guān)于的區(qū)別，網(wǎng)上很多人的解釋是存在誤區(qū)，解釋是不夠清楚的，今天在這里把個人測試過的分享給大家按標(biāo)簽進行選擇寫法一使用得出的效果如圖使用得出的效果如圖由以上兩個效果圖可知，在父級元素下只有標(biāo)簽的時候，兩者沒什么區(qū)別。 關(guān)于nth-child && nth-of-type的區(qū)別，網(wǎng)上很多人的解釋是存在誤區(qū)，解釋是不夠清楚的，今天在這里把個人測試過的分享給大家 按標(biāo)簽進行選擇 寫法一： ...
摘要：滿足結(jié)果的為和，但是不匹配類名為，所以最后匹配結(jié)果為結(jié)果類名順序失效匹配每一級第三個標(biāo)簽且標(biāo)簽類名為的。匹配所有父級是的元素兄弟節(jié)點選擇器匹配所有緊接著元素之后的元素 子節(jié)點選擇器 :nth-of-type() && :nth-child() :nth-of-type(n) 匹配父節(jié)點下同一級對應(yīng)標(biāo)簽的第n個節(jié)點 (:nth-last-of-type(n)反序) :nth-child...
閱讀 2420·2021-10-14 09:43
閱讀 2450·2021-09-09 09:34
閱讀 1610·2019-08-30 12:57
閱讀 1212·2019-08-29 14:16
閱讀 732·2019-08-26 12:13
閱讀 3210·2019-08-26 11:45
閱讀 2296·2019-08-23 16:18
閱讀 2674·2019-08-23 15:27
