nth-child(n)和nth-of-type(n)的区分

最新推荐文章于 2024-03-05 10:34:17 发布

长安古意

最新推荐文章于 2024-03-05 10:34:17 发布

阅读量1.2k

点赞数

分类专栏： css基础

本文链接：https://blog.csdn.net/aiyishengyishi/article/details/54342631

版权

css基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一.nth-of-type(n)和nth-child(n)区别

1.nth-child(n)
意为在父元素下找到第一个元素
第一个元素为span—字体为红色
第一个元素为其他类型元素 —-字体颜色不设置
也就是说想要对应的样式生效，要同时满足type和n（即父元素的第一个子元素是span或者span是父元素的第一个子元素）
2.nth-of-type(1)
意为在父元素下找到第一个type为span的元素（即使这个span元素在父元素中不是第一顺位）

二.nth-of-type(n)和nth-child(n)例子

这里写图片描述

<!DOCTYPE html>
<html>
<head>
<title>nth-of-type(n)和nth-child(n)</title>
<meta charset='utf-8' />
<style> 
    .demo1 li:nth-of-type(1){
        color:red;
    }
    .demo2 li:nth-child(1){
        color:red;
    }
</style>
</head>
    <body>
        <h1>nth-of-type(1)</h1>
        <div class="demo1">

            <li>一</li>
            <li>二</li>
            <li>三</li>
        </div>
        <h1>nth-child(1)</h1>
        <div class="demo2">
            <li>一</li>
            <li>二</li>
            <li>三</li>
        </div>

    </body>
</html>

这里写图片描述

<!DOCTYPE html>
<html>
<head>
<title>nth-of-type(n)和nth-child(n)</title>
<meta charset='utf-8' />
<style> 
    .demo1 span:nth-of-type(1){
        color:red;
    }
    .demo2 span:nth-child(1){
        color:red;
    }
</style>
</head>
    <body>
        <h1>nth-of-type(1)</h1>
        <div class="demo1">

            <li>一</li>
            <span>特殊</span>
            <li>二</li>
            <li>三</li>
        </div>
        <h1>nth-child(1)</h1>
        <div class="demo2">
            <li>一</li>
            <span>特殊</span>
            <li>二</li>
            <li>三</li>
        </div>

    </body>
</html>

三.总结

当父元素下的子元素是同一个类型时，nth-child(n)和nth-of-type(n)的表现一致
当父元素下的子元素是多种类型的时，nth-child(n)和nth-of-type(n)的表现可能会不一致，但使用nth-of-type(n)应该总有元素会受到样式的影响，使用nth-child(n)咋可能不会对元素进行影响