定義
:nth-child(n)選擇器匹配父元素中的第n個(gè)子元素,元素類型沒有限制,n可以是數(shù)字或公式
:nth-of-type(n)選擇器匹配同類型中的第n個(gè)同級(jí)兄弟元素,n可以是數(shù)字或公式
例子1:
<template>
<section>
<p>我是第1個(gè)p標(biāo)簽</p>
<p>我是第2個(gè)p標(biāo)簽</p> <!-- 希望這個(gè)變紅 -->
</section>
</template>
<style>
p:nth-child(2) { color: red; }
p:nth-of-type(2) { color: red; }
</style>
我們發(fā)現(xiàn)這兩個(gè)樣式表現(xiàn)一致
例子2
<template>
<section>
<span>打擾項(xiàng)</span>
<p>我是第1個(gè)p標(biāo)簽</p>
<p>我是第2個(gè)p標(biāo)簽</p> <!-- 希望這個(gè)變紅 -->
</section>
</template>
<style>
p:nth-child(2) { color: red; }
p:nth-of-type(2) { color: red; }
</style>
我們發(fā)現(xiàn)這兩者表現(xiàn)不一致,第一個(gè)標(biāo)紅的是p:nth-child(2),表示匹配父元素中的第2個(gè)子元素并且這個(gè)元素是p元素,第一個(gè)p元素正好符合所以標(biāo)紅,第二個(gè)標(biāo)紅的是p:nth-of-type(2),表示匹配同類型(p元素)中的第2個(gè)同級(jí)兄弟元素
例子3
<template>
<section>
<div>打擾項(xiàng)1</div>
<span>打擾項(xiàng)2</span>
<p>我是第1個(gè)p標(biāo)簽</p>
<p>我是第2個(gè)p標(biāo)簽</p> <!-- 希望這個(gè)變紅 -->
</section>
</template>
<style>
p:nth-child(2) { color: red; }
p:nth-of-type(2) { color: red; }
</style>
p:nth-child(2)發(fā)現(xiàn)父元素下的第二個(gè)元素是span不是p元素不符合條件所以沒有標(biāo)紅,p:nth-of-type(2)找到同類型p元素的第二個(gè)p元素存在,所以可以標(biāo)紅
例子4
<template>
<section>
<div class="item">打擾項(xiàng)1</div>
<span class="item">打擾項(xiàng)2</span>
<p class="item">我是第1個(gè)p標(biāo)簽</p>
<p class="item">我是第2個(gè)p標(biāo)簽</p> <!-- 希望這個(gè)變紅 -->
</section>
</template>
<style>
.item:nth-child(2) { color: red; }
.item:nth-of-type(2) { color: red; }
</style>
.item:nth-child(2)尋找父元素下的第二個(gè)子元素并且class類名是item給它標(biāo)紅,.item:nth-of-type(2)尋找同類型元素(p元素)中的第2個(gè)同級(jí)兄弟元素給它標(biāo)紅
例子5
<template>
<section>
<div class="item">打擾項(xiàng)1</div>
<div class="item">打擾項(xiàng)2</div>
<p class="item">我是第1個(gè)p標(biāo)簽</p>
<p class="item">我是第2個(gè)p標(biāo)簽</p> <!-- 希望這個(gè)變紅 -->
</section>
</template>
<style>
.item:nth-child(2) { color: red; }
.item:nth-of-type(1) { color: red; }
</style>
我們發(fā)現(xiàn)第一個(gè)、第二個(gè)扰柠、第三個(gè)都標(biāo)紅了,.item:nth-child(2)還是第二個(gè)標(biāo)紅,.item:nth-of-type(1)讓第一個(gè)和第三個(gè)標(biāo)紅,解釋跟上面一樣同類型的第一個(gè)子元素
