:nth-child和:nth-of-type的區別
:nth-child()表示父元素下的第n個子元素。比如div p:nth-child(2)表示div下的第二的元素、如果不是p元素則沒有匹配的元素 :nth-of-type()表示父元素下的第ｎ個型別的元素 比如div p:nth-of-type(2)表示div下的第二個ｐ元素。
基本程式碼如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .box{ width: 50%;margin: auto; } ul,li{list-style: none;} .box div,p{ border: 1px solid #008000;height: 30px;line-height:30px;text-indent: 10px; } .box div{ margin: 10px auto; } </style> </head> <body> <div class="box"> <p>ppp</p> <p>ppp</p> <div>div</div> <div>div</div> <article>article</article> <div>div</div> <div>div</div> <div>div</div> <ul> <li>ul中的li標籤</li> </ul> <p><span>p標籤裡面的span標籤</span></p> <span>span</span> </div> </body> </html>
效果如下:
後面的例子中，始終以此程式碼為標準，只增加CSS樣式，DOM部分不變。
現在我們開始以例項來看不同偽類選擇器所展現出來的效果:
1、:nth-child
<style>
...
.box :nth-child(2){
background: yellow;
}
</style>效果如下：
我們在使用nth-child時，並沒有在其前面指定型別，現在選中的是.box下的第二個子元素。
2、:nth-of-type.
<style> ... .box :nth-of-type(2){ background: yellow; } </style>
效果如下:
選中的是第二P標籤和第二個div標籤。結論1：在不指定型別時，nth-child(n)選中的是父元素下的第N個子元素。nth-of-type(n)選中的是父元素下的不同型別標籤的第N個。
3、div:nth-chiid.
<style>
...
.box div:nth-child(2){
background:yellow;
}
</style>效果如下：
在試試看p:nth-child(2);
<style> ... .box p:nth-child(2){ background:yellow; } </style>
效果如下：
選中的是.box的第二個子元素，這個子元素的標籤是P。
4、div:nth-chiid.
<style>
...
.box div:nth-of-type(2){
background:pink;
}
</style>
選中的是.box下的div標籤的第二個子元素
結論2：ele:nth-child(n)要求不僅僅是第n個子元素，並且這個子元素的標籤是ele。ele:nth-of-type(n)選擇的是父元素下ele標籤的第二個
5、nth-last-child(n)和nth-last-of-type(n)的用法和nth-child(n),nth-of-type(n)用法相同，唯一的區別是:nth-last-child(n)是倒數第n個元素.nth-last-of-type(n)是倒數第n個標籤。
6、last-child
<style>
...
.box p:last-child{
background: yellow;
}
</style>效果如下:
如果不指定元素型別:
<style>
...
.box :last-child{
background: yellow;
}
</style>效果如下:
6、last-of-type
<style>
...
.box p:last-of-type{
background: pink;
}
</style>效果如下：
選中了父元素下P標籤的最後一個。
<style>
...
.box :last-of-type{
background: pink;
}
</style>效果如下：
結論3：ele:last-child選中父元素下最後一個子元素，並且該子元素的標籤必須為ele，否則一個都不選中。ele:last-of-type選中父元素下ele標籤的最後一個.
7、ele:first-child、ele:first-of-type與ele:last-child、ele:last-of-type恰好相反.
簡單應用:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.myTable{
border-collapse: collapse;
border: 1px solid green;
}
td,th{
border: 1px solid green;
padding: 10px 20px;
}
tbody tr:nth-child(odd){
background: yellow;
}
</style>
</head>
<body>
<table class="myTable">
<thead>
<tr><th>Index</th><th>Name</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>apple</td></tr>
<tr><td>2</td><td>orange</td></tr>
<tr><td>3</td><td>lemon</td></tr>
<tr><td>4</td><td>mango</td></tr>
<tr><td>5</td><td>watermelon</td></tr>
<tr><td>6</td><td>grape</td></tr>
</tbody>
</table>
</body>
</html>效果:
延伸:
相比大家都知道 :nth-child(2n)是選中偶數子元素 但是，如果我們想選中前6個子元素呢？ 可以使用 nth-child(-n+6)
<style>
...
tbody tr:nth-child(-n+3){
background: yellow;
}
</style>- 1
- 2
- 3
- 4
- 5
- 6
效果:
從第三個開始選中
<style>
...
tbody tr:nth-child(n+3){
background: yellow;
}
</style>效果:
