CSS3选择器中关于:nth-child和:nth-of-type区别的介绍

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS3选择器中关于:nth-child和:nth-of-type区别的介绍，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1397字，纯文字阅读大概需要2分钟。

内容图文

一、:nth-child

1.1 说明

:nth-child(n)选择器匹配属于其父元素的第N个子元素，不论元素的类型。n可以是数字、关键词或公式。

注意：如果第N个子元素与选择的元素类型不同则样式无效！

1.2 示例

<style>
p>p:nth-child(2){
    color:red;
}
</style>
<p>
    <p>我是第1个段落</p>
    <p>我是第2个段落</p><!--符合条件：1、是<p>元素，2、父元素<p>的第二个元素。这里被选择，会变成红色。-->
    <p>我是第3个段落</p>
</p>
<p>
    <p>我是第1个段落</p>
    <span>我是第1个文本</span><!--不符合条件：不是<p>元素，没有被选择-->
    <p>我是第2个段落</p>
</p>

1.3 改进

如果想让上面第二个<span>生效的可以去除子元素<p>的选择，写一个父元素<p>加一个空格，以防止:nth-child不生效。

<style>
p :nth-child(2){ //p+空格，只根据父元素选择
    color:red;
}
</style>
<p>
    <p>我是第1个段落</p>
    <span>我是第1个文本</span><!--符合条件-->
    <p>我是第2个段落</p>
</p>

二、:nth-of-type

2.1 说明

:nth-of-type(n)选择器匹配属于父元素的特定类型的第N个子元素的每个元素。n可以是数字、关键词或公式。

2.2 示例

<style>
p>p:nth-of-type(2){
    color:red;
}
</style>
<p>
    <p>我是第1个段落</p>
    <p>我是第2个段落</p><!--符合条件：1、是特定元素类型<p>，2、是父元素<p>的第二个<p>元素。这里被选择，会变成红色-->
    <p>我是第3个段落</p>
</p>
<p>
    <p>我是第1个段落</p>
    <blockquote>第1个引用</blockquote>
    <p>我是第2个段落</p><!--符合条件：1、是特定元素类型<p>，2、是父元素<p>的第二个<p>元素。这里被选择，会变成红色-->
    <p>我是第3个段落</p>
</p>

以上就是CSS3选择器中关于:nth-child和:nth-of-type区别的介绍的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的CSS3选择器中关于:nth-child和:nth-of-type区别的介绍全部内容，希望文章能够帮你解决CSS3选择器中关于:nth-child和:nth-of-type区别的介绍所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---