CSS3 :nth-child() 选择器和 :nth-of-type() 选择器

睫毛长长的舒克

已于 2022-06-04 11:53:59 修改

阅读量249

点赞数

分类专栏：前端文章标签： CSS3 选择器

于 2019-09-11 20:22:49 首次发布

本文链接：https://blog.csdn.net/baidu_38607919/article/details/96218664

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

区别：

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

:nth-of-type()选择器，该选择器选取父元素的第 N 个指定类型的子元素。Odd 和 even 是可用于匹配下标是奇数或偶数的子元素。

通俗来说：

p :nth-child(x) 指第x个子元素并且该元素为p类型的元素（tip：如果第x个元素不是p类型样式不生效）

p :nth-of-type(x) 指子元素里面的第x个p类型的元素

注意，这两种选择器的第一个子元素下标都是 1，而不是从0开始。

eg: 分别用两个选择器，实现div里的第一和第三个子元素p背景红色

<!DOCTYPE html>
<html>
<head>
<style> 
    div>p:nth-child(2n-1)
    {
        background:#ff0000;
    }
    div>p:nth-of-type(odd)
    {
        background:#ff0000;    
    }
</style>
</head>
<body>
    <div>
       <p>第一个儿子。</p>
       <p>第二个儿子。</p>
       <p>第三个儿子。</p>
       <p>第四个儿子。</p>
    </div>
</body>
</html>

最后，用好这两个属性，将会为CSS编码带来极大的便利！！

睫毛长长的舒克

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 :nth-child() 选择器和 :nth-of-type() 选择器

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n可以是数字、关键词或公式。:nth-of-type()选择器，该选择器选取父元素的第 N 个指定类型的子元素。Odd 和 even 是可用于匹配下标是奇数或偶数的子元素。注意，这两种选择器的第一个子元素下标都是 1，而不是从0开始。eg:分别用两个选择器，实现div里的第一和第三个子元素......
复制链接

扫一扫

专栏目录