定义
:nth-child(n)选择器匹配父元素中的第n个子元素,元素类型没有限制,n可以是数字或公式
:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素,n可以是数字或公式
例子1:
<template>
<section>
<p>我是第1个p标签</p>
<p>我是第2个p标签</p> <!-- 希望这个变红 -->
</section>
</template>
<style>
p:nth-child(2) { color: red; }
p:nth-of-type(2) { color: red; }
</style>
我们发现这两个样式表现一致
例子2
<template>
<section>
<span>打扰项</span>
<p>我是第1个p标签</p>
<p>我是第2个p标签</p> <!-- 希望这个变红 -->
</section>
</template>
<style>
p:nth-child(2) { color: red; }
p:nth-of-type(2) { color: red; }
</style>
我们发现这两者表现不一致,第一个标红的是p:nth-child(2),表示匹配父元素中的第2个子元素并且这个元素是p元素,第一个p元素正好符合所以标红,第二个标红的是p:nth-of-type(2),表示匹配同类型(p元素)中的第2个同级兄弟元素
例子3
<template>
<section>
<div>打扰项1</div>
<span>打扰项2</span>
<p>我是第1个p标签</p>
<p>我是第2个p标签</p> <!-- 希望这个变红 -->
</section>
</template>
<style>
p:nth-child(2) { color: red; }
p:nth-of-type(2) { color: red; }
</style>
p:nth-child(2)发现父元素下的第二个元素是span不是p元素不符合条件所以没有标红,p:nth-of-type(2)找到同类型p元素的第二个p元素存在,所以可以标红
例子4
<template>
<section>
<div class="item">打扰项1</div>
<span class="item">打扰项2</span>
<p class="item">我是第1个p标签</p>
<p class="item">我是第2个p标签</p> <!-- 希望这个变红 -->
</section>
</template>
<style>
.item:nth-child(2) { color: red; }
.item:nth-of-type(2) { color: red; }
</style>
.item:nth-child(2)寻找父元素下的第二个子元素并且class类名是item给它标红,.item:nth-of-type(2)寻找同类型元素(p元素)中的第2个同级兄弟元素给它标红
例子5
<template>
<section>
<div class="item">打扰项1</div>
<div class="item">打扰项2</div>
<p class="item">我是第1个p标签</p>
<p class="item">我是第2个p标签</p> <!-- 希望这个变红 -->
</section>
</template>
<style>
.item:nth-child(2) { color: red; }
.item:nth-of-type(1) { color: red; }
</style>
我们发现第一个、第二个、第三个都标红了,.item:nth-child(2)还是第二个标红,.item:nth-of-type(1)让第一个和第三个标红,解释跟上面一样同类型的第一个子元素
