css3中 nth-child 和 nth-of-type 的区别

有蝉

已于 2022-03-13 15:15:21 修改

阅读量470

点赞数

分类专栏： css 文章标签： css3 elementui sass

于 2020-04-26 09:48:04 首次发布

本文链接：https://blog.csdn.net/qq_37899792/article/details/105762170

版权

css 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

参考：深入理解css3中 nth-child 和 nth-of-type 的区别 - peakleo - 博客园

首先：nth-child 和 nth-of-type的索引都是从1开始的

nth-child 和 nth-of-type有什么不同？

直接上例子，看代码注释就好

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo</title>
</head>
<style>

  /*ul下的第2个元素  且这个元素为li*/
  .ul li:nth-child(2) {
    color: red;
  }


  /*ul下的第2个li*/
  .ul li:nth-of-type(2) {
    color: green;
  }
</style>
<body>
<div>

  <ul class="ul">
    <div>zero</div>
    <li>one</li>    <!-- red -->
    <li>two</li>    <!--  green-->
  </ul>
</div>
</body>
</html>

如果在nth-child和 nth-of-type前不指定标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo</title>
</head>
<style>
    
  /*ul下的第2个元素*/
  .ul :nth-child(2) {
    color: red;
  }


  /*ul下 的所有类型标签的第二个。*/
  .ul :nth-of-type(2) {
    color: green;
  }

  
</style>

<body>
<div>
  <ul class="ul">
    <div>first div</div>
    <li>first li</li><!-- 红色 -->
    <li>second li</li><!-- 绿色 -->
    <div>second div</div><!--绿色  -->
    <div style="padding-left:10px">
        <span>first span</span>
        <span>second span</span><!--绿色  -->
    </div>
  </ul>
</div>
</body>
</html>

公式：或者说是算术表达式

使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色：

<style>
  p:nth-of-type(3n+0) {
    background: #ff0000;
  }
</style>

若是 :nth-of-type(4n+2) 就是选择下标是4的倍数加上2的所有元素

有蝉

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css3中 nth-child 和 nth-of-type 的区别

nth-child 和 nth-of-type的下标都是从1开始的nth-child 和 nth-of-type有什么不同？直接上例子，看代码注释就好<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>demo</ti...
复制链接

扫一扫

专栏目录