資訊專欄INFORMATION COLUMN
摘要：和是的兩個偽選擇器。就是要找第二個子元素，也就是第二步檢查是否匹配。你以為會匹配到結果并沒有解釋的查找過程也有兩步找出同標記類型下的第個元素。那么這個樣式應用成功，因為匹配。但是則應用失敗，因為的里沒有。
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）可以是標記類型（markup type）,也可以是樣式（style）。后面的序列有不同的表達，n是從0開始數起，即0,1,2...，得出來的結果就是選中的序列。我們分開來一個個看。
先看selector部分。an+b我們先簡化為一個數字，只選擇第幾個元素。
p:nth-child(2) 和 .info:nth-child(2) 有什么不同
有如下HTML代碼：
ph1
ph2
ph3
ph4
ph5
那么上面兩個css的結果如下
p:nth-child(2) { /* 樣式生效，背景顯示紅色 */
background-color: red;
}
.info:nth-child(2) { /* 匹配不到元素，沒有任何效果。你以為會匹配到ph4
,結果并沒有 */
background-color: blue;
}
解釋：nth-child的查找步驟有兩步：
1. 按序列因子找到對應子元素 2. 檢查對應元素是否與selector匹配
第一步查找是按照序號絕對查找，寫明是第幾個子元素，就定位到第幾個元素。nth-child(2)就是要找第二個子元素，也就是
ph2
ph2
的類型是p，因此上面的第一個樣式應用成功；class有一個類型是ph，但第二樣式提供的是.info,不匹配。因此應用失敗。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
,結果并沒有 */
background-color: blue;
}
解釋：nth-of-type的查找過程也有兩步：
1. 找出同標記類型下的第n個元素。 2. 找出匹配selector的元素。
nth-of-type(2)找的是同類型的第2個元素，這里只有一種類型p，因此找到的是
ph2
。那么p:nth-of-type(2)這個樣式應用成功，因為ph2
匹配seletor “p”。但是.info:nth-of-type(2)則應用失敗，因為ph2
的class里沒有.info。ph1
ph2ph3
ph4
ph5
那么.info:nth-of-type(2)就應用成功了，匹配到的是
ph3
。它是第二個p類型元素，而且class包含.info總結：
selector:nth-child(n) 找到這樣的元素，它是第n個子元素，且匹配selector
selector:nth-of-type(n) 找到這樣的元素，它是統一標記類型的第n個元素，且匹配selector
《未完》
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113028.html
摘要：和是的兩個偽選擇符。所以，和的不同之處就是查找元素的方式不同。前者是查找兄弟元素中某個絕對位置的元素，后者是查找同類型元素中某個絕對位置的元素。也就是說選擇符與他們的查找方式沒有關系。錯誤查找第二個包含的元素。 nth-child和nth-of-type是css的兩個偽選擇符。應用中，這兩者常常容易混淆。這里把它們拿出來仔細做個對比，看看這兩者是怎么查找元素的。 nth-child(n...
摘要：關于的區別，網上很多人的解釋是存在誤區，解釋是不夠清楚的，今天在這里把個人測試過的分享給大家按標簽進行選擇寫法一使用得出的效果如圖使用得出的效果如圖由以上兩個效果圖可知，在父級元素下只有標簽的時候，兩者沒什么區別。 關于nth-child && nth-of-type的區別，網上很多人的解釋是存在誤區，解釋是不夠清楚的，今天在這里把個人測試過的分享給大家 按標簽進行選擇 寫法一： ...
摘要：關于的區別，網上很多人的解釋是存在誤區，解釋是不夠清楚的，今天在這里把個人測試過的分享給大家按標簽進行選擇寫法一使用得出的效果如圖使用得出的效果如圖由以上兩個效果圖可知，在父級元素下只有標簽的時候，兩者沒什么區別。 關于nth-child && nth-of-type的區別，網上很多人的解釋是存在誤區，解釋是不夠清楚的，今天在這里把個人測試過的分享給大家 按標簽進行選擇 寫法一： ...
摘要：關于的區別，網上很多人的解釋是存在誤區，解釋是不夠清楚的，今天在這里把個人測試過的分享給大家按標簽進行選擇寫法一使用得出的效果如圖使用得出的效果如圖由以上兩個效果圖可知，在父級元素下只有標簽的時候，兩者沒什么區別。 關于nth-child && nth-of-type的區別，網上很多人的解釋是存在誤區，解釋是不夠清楚的，今天在這里把個人測試過的分享給大家 按標簽進行選擇 寫法一： ...
摘要：滿足結果的為和，但是不匹配類名為，所以最后匹配結果為結果類名順序失效匹配每一級第三個標簽且標簽類名為的。匹配所有父級是的元素兄弟節點選擇器匹配所有緊接著元素之后的元素 子節點選擇器 :nth-of-type() && :nth-child() :nth-of-type(n) 匹配父節點下同一級對應標簽的第n個節點 (:nth-last-of-type(n)反序) :nth-child...
閱讀 2403·2021-10-14 09:43
閱讀 2434·2021-09-09 09:34
閱讀 1600·2019-08-30 12:57
閱讀 1198·2019-08-29 14:16
閱讀 715·2019-08-26 12:13
閱讀 3200·2019-08-26 11:45
閱讀 2281·2019-08-23 16:18
閱讀 2652·2019-08-23 15:27
