nth-child 和 nth-of-type 的区别换个更合适的例子

最新推荐文章于 2023-03-26 23:51:35 发布

gaoqiang1112

最新推荐文章于 2023-03-26 23:51:35 发布

阅读量171

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/gaoqiang1112/article/details/105407766

版权

css 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

nth-child

<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <style>
        span:nth-child(4),span:nth-child(7){  color:red;  }
        /*翻译
         span 的父级元素的子元素第4个元素且是span的  所以span1红了 
         span:nth-child(7)并未生效 因为没有匹配上
        */
        .t:nth-child(8){  color: blue;  }
        /*class 是t的父级元素的子元素第8个 且class有t 所以h2 2 蓝了*/
    </style>
</head>

<body>
<h2 >我是h2 1</h2>
<p class="t">我是p 1</p>
<p class="t">我是p 2</p>
<span class="t">我是span1</span>
<span>我是span2</span>
<span class="t">我是span3</span>
<p class="t">我是p3</p>
<h2 class="t">我是h2 2</h2>
<h2 class="t">我是h2 3</h2>
</body>
</html>

nth-of-type

<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <style>
        span:nth-of-type(2),span:nth-of-type(4){  color:red;  }
        /*翻译
         span 的父级元素的子元素中 类型是span的第二个和第四个  所以span2红了 
         没有第4个span 所以无效了
        */
        .t:nth-of-type(3){  color: blue;  }
        /*翻译
         class 是t的父级元素的子元素中  各类型标签的第3个 且有class="t"
         所以span3 p3 蓝了  h2 3 没有蓝
        */
    </style>
</head>

<body>
<h2 >我是h2 1</h2>
<p class="t">我是p 1</p>
<p class="t">我是p 2</p>
<span class="t">我是span1</span>
<span>我是span2</span>
<span class="t">我是span3</span>
<p class="t">我是p3</p>
<h2 class="t">我是h2 2</h2>
<h2 >我是h2 3</h2>
</body>
</html>

希望对大家有帮助感谢疫情

gaoqiang1112

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
nth-child 和 nth-of-type 的区别换个更合适的例子

nth-child<html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <style> span:nth-child(4),span:nth-child(7){ color:red; } ...
复制链接

扫一扫