nth-child(n)和nth-of-type(n)的區別
1.官方解釋： p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個 <p> 元素。 p:nth-of-type(2) 選擇屬於其父元素第二個 <p> 元素的每個 <p> 元素。 2.大白話 p:nth-child ...
原文：一次性分清nth-child(n)和nth-of-type(n)
nth child和nth of type都是子代選擇器，他們的區別就是nth child強制是父元素的第幾個子元素，而nth of type要求是同中類型的第幾個元素。 可以看到頁面沒有任何元素變色。原因是該選擇器先找到p元素的父元素body，然后找父元素的第一個子元素，body的第一個子元素是span，但p:nth child 要求的類型是p，所以沒有符合條件的。 由於第一個p是body的第二 ...
2019-07-09 10:42 0 431 推薦指數：
相關推薦
偽類選擇器 E:nth-child(n)、E:nth-of-type(n)
結構偽類是css3新增的類型選擇器。 E:nth-child(n)、E:nth-of-type(n)就是其中之二。搞懂了這兩個，基本上跟他倆一家的其他幾個兄弟伙基本上也可以弄懂了。 首先先用文字語言來描述一下這倆： E:nth-child(n)： 選擇父元素下的第n個子元素 ...
nth-of-type與nth-child的區別
nth-of-type： 簡單來說nth-of-type會忽略其它標簽的順序而按照標簽自身種類的順序進行篩選，也就是選擇的參照點並不是DOM數，而是自身。下面我們結合具體的例子來了解下。 代碼效果如下圖所示，文本中的第3個p標簽背景顏色發生改變。 nth-child ...
理解nth-child和nth-of-type
css中的nth-child和nth-of-type用於選擇父元素下第n個子元素，但是對於他們的理解卻不夠深入，所以通過這個下面的示例詳細展示一下他們的效果。 一、准備頁面 本次使用的都是.container下的元素，div和p統一編號為1-8，div元素有類node，會再顯示 ...
徹底理解nth-child和nth-of-type的區別。
是因為之前覺得自己已經理解了nth-of-type但后來發現好像和自己之前理解的不太一樣，於是打算寫下 ...
偽類選擇器 :nth-child(even) :nth-child(odd) :nth-of-type
屬性 描述 CSS :active 向被激活的元素添加樣式。 1 :focus 向擁有鍵盤輸入焦 ...
CSS3 :nth-child(N)的用法
h5標簽:nth-child(N)｛｝指定標簽父元素的第N個子元素的css樣式 <!DOCTYPE html><html><head><style> p:nth-child(2){background:#ff0000 ...
css循環樣式: nth-child(n)
nth-child(n) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport ...