css中關於:nth-child()和:nth-of-type()的深入理解
阿新 • • 發佈：2020-08-13
css中關於:nth-child()和:nth-of-type()的深入理解
在css中有這樣一類屬性，是以:nth-開頭的，其中最常見的就是:nth-child() 和 :nth-of-type()，兩者既有相同的地方，也有不同的地方。
- 相同的地方：都是修改父級下的的幾個同級的元素的樣式
- 不同的地方：:nth-child()是修改父元素下的同級元素的第n個元素內的樣式，但是:nth-of-type()是修改父元素下的同級元素的第n個同類型元素的樣式。例如：p:nth-of-type(2)就是修改p元素的父級元素下的與p同級的第二個p元素的樣式；p:nth-child(2)就是修改p元素的父級元素下的與p同級的第二個元素的樣式。
<style>
/* 修改body下面的第二個元素的樣式，注意是同級元素**/
body :nth-child(2) {
color: red;
}
/* 修改body下面的每一種元素的第二個元素的樣式，注意是同級元素*/
body :nth-of-type(2) {
color: green;
}
</style>
<body> <a href="#">測試a</a> <div>測試div</div> <p>測試p</p> <a href="#">測試a</a> <div>測試div</div> <p>測試p</p> <b>測試b</b> <div>測試div</div> <p>測試p</p> <a href="#">測試a</a> <b>測試b</b> <p>測試p</p> </body>
結果如下：