CSS中nth-child與nth-of-type的元素查找方式有哪些-創(chuàng)新互聯(lián)
這篇文章給大家分享的是有關CSS中nth-child與nth-of-type的元素查找方式有哪些的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
成都網(wǎng)站設計、做網(wǎng)站介紹好的網(wǎng)站是理念、設計和技術的結合。
成都創(chuàng)新互聯(lián)擁有的網(wǎng)站設計理念、多方位的設計風格、經(jīng)驗豐富的設計團隊。提供PC端+手機端網(wǎng)站建設，用營銷思維進行網(wǎng)站設計、采用先進技術開源代碼、注重用戶體驗與SEO基礎，將技術與創(chuàng)意整合到網(wǎng)站之中，以契合客戶的方式做到創(chuàng)意性的視覺化效果。
nth-child和nth-of-type是css的兩個偽選擇符。應用中，這兩者常常容易混淆。這里把它們拿出來仔細做個對比，看看這兩者是怎么查找元素的。
nth-child(n) —— 尋找第n個子元素
nth-of-type(n) —— 尋找同一類型元素里的第n個元素
看這個定義也許還不是很清楚他們的區(qū)別，我們一點點來區(qū)分。
p:nth-child(2) 與 p:nth-pf-type(2)
HTML代碼如下
div1
div2
div3
div4
分別應用兩個樣式, 都是找第二個元素
p:nth-child(2) {
color: red;
font-weight:bold;
}
h6:nth-of-type(2) {
color: blue;
font-weight:bold;
}結果：兩者都應用成功。
現(xiàn)在我們對HTML代碼做點改動，讓他們出現(xiàn)一些不同。我們將第一個p元素和第一個h6元素改為label，代碼如下：
div2
div3
div4
樣式不變，這時再來看效果，發(fā)現(xiàn)nth-of-type(2)結果變了，這時高亮的是div3。到這里也算符合我們的邏輯。h6:nth-of-type(2)要找的是第二個h6類型的元素，也就是div3。
繼續(xù)改動HTML代碼。我們恢復第一個p元素和第一個h6元素，將第二個p元素和第二個h6元素改為label，樣式仍保持不變，結果會怎樣呢？
HTML如下：
div1
div3
div4
所以，nth-child和nth-of-type的不同之處就是查找元素的方式不同。前者是查找兄弟元素中某個絕對位置的元素，后者是查找同類型元素中某個絕對位置的元素。相同之處是，兩者都是找到元素之后再與前面的選擇符進行匹配，這里的匹配方式是一樣的。
稍微往下延伸，清楚了查找方式，那么不管前面的選擇符怎么變，最后都是先查找到元素再與前面的選擇符進行匹配。也就是說選擇符與他們的查找方式?jīng)]有關系。弄清楚這個就不會被不同的組合混淆了。
感謝各位的閱讀！關于“CSS中nth-child與nth-of-type的元素查找方式有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
重慶分公司
重慶分公司
