JS——nth-child和nth-of-type的区别以及nth-of-type下的坑

最新推荐文章于 2024-09-11 09:30:30 发布
最新推荐文章于 2024-09-11 09:30:30 发布
阅读量1.5k 收藏 2
点赞数 2
分类专栏： 前端 文章标签： javascript css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fuzhijieabc/article/details/125991123
版权

CSS3:nth-child()选择器

:nth-child(n)选择器匹配属于其父元素的第n个子元素，无论元素的类型

<!DOCTYPE html>
<html>

<head>
    <style>
        /* 选择的是p元素的父元素下的第二个子元素（无论类型）的每个p的背景色为red */
        p:nth-child(2) {
            background: red;
        }
    </style>
</head>

<body>

    <h1>这是标题</h1>
    <p>第一个段落。</p>
    <p>第二个段落。</p>
    <p>第三个段落。</p>
    <p>第四个段落。</p>

    <p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>

</body>

</html>

实例1

Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。

在这里，我们为奇数和偶数 p 元素指定两种不同的背景色：

<!DOCTYPE html>
<html>

<head>
    <style>
        /* 选择的是p元素其父元素下所有的基数元素（无论类型）下p的样式 */
        p:nth-child(odd) {
            background: #ff0000;
        }
        /* 选择的是p元素其父元素下所有的偶数元素（无论类型）下p的样式 */
        p:nth-child(even) {
            background: #0000ff;
        }
    </style>
</head>

<body>

    <h1>这是标题</h1>
    <p>第一个段落。</p>
    <p>第二个段落。</p>
    <p>第三个段落。</p>
    <p>第四个段落。</p>

    <p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>

</body>

</html>

实例2

使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。

在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色：

<!DOCTYPE html>
<html>

<head>
    <style>
        /* 选择的是p元素其父元素下所有子元素小标为3倍的p元素：0、3、6 */
        p:nth-child(3n+0) {
            background: #ff0000;
        }
    </style>
</head>

<body>

    <h1>这是标题</h1>
    <p>第一个段落。</p>
    <p>第二个段落。</p>
    <p>第三个段落。</p>
    <p>第四个段落。</p>
    <p>第五个段落。</p>
    <p>第六个段落。</p>
    <p>第七个段落。</p>
    <p>第八个段落。</p>
    <p>第九个段落。</p>

    <p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>

</body>

</html>

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

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

n 可以是数字、关键词或公式。

<!DOCTYPE html>
<html>

<head>
    <style>
        /* 选择的是p元素的父元素下的第二个子元素（必须为p元素）的每个p的背景色为red */
        p:nth-of-type(2) {
            background: red;
        }
    </style>
</head>

<body>

    <h1>这是标题</h1>
    <p>第一个段落。</p>
    <p>第二个段落。</p>
    <p>第三个段落。</p>
    <p>第四个段落。</p>

    <p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>

</body>

</html>

实例1

Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。

在这里，我们为奇数和偶数 p 元素指定两种不同的背景色：

<!DOCTYPE html>
<html>

<head>
    <style>
        p:nth-of-type(odd) {
            background: #ff0000;
        }

        p:nth-of-type(even) {
            background: #0000ff;
        }
    </style>
</head>

<body>

    <h1>这是标题</h1>
    <p>第一个段落。</p>
    <p>第二个段落。</p>
    <p>第三个段落。</p>
    <p>第四个段落。</p>
    <p>第五个段落。</p>

</body>

</html>

实例2

使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。

在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色：

<!DOCTYPE html>
<html>

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

<body>

    <h1>这是标题</h1>
    <p>第一个段落。</p>
    <p>第二个段落。</p>
    <p>第三个段落。</p>
    <p>第四个段落。</p>
    <p>第五个段落。</p>
    <p>第六个段落。</p>
    <p>第七个段落。</p>
    <p>第八个段落。</p>
    <p>第九个段落。</p>

</body>

</html>

使用 nth-of-type选择类名下的坑

如果是 .class:nth-of-type(n)所选出的html元素必须同时符合以下条件：

  • 类属性中包含 class
  • 包含该属性的元素必须是其父元素下子元素的第n个
<!DOCTYPE html>
<html>

<head>
  <style>
    html {
      font-size: 16px;
    }

    .ems:nth-last-of-type(1) li {
      font-size: 1.3em;
    }

    .rems li {
      font-size: 1.3rem;
    }
  </style>
</head>

<body>
  <ul class="ems">
    <li>One</li>
    <li>Two</li>
    <li>Three
      <ul>
        <li>Three A</li>
        <li>Three B
          <ul>
            <li>Three B 2</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

  <ul class="ems">
    <li>One</li>
    <li>Two</li>
    <li>Three
      <ul>
        <li>Three A</li>
        <li>Three B
          <ul>
            <li>Three B 2</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
  </div>
  <ul class="rems">
    <li>One</li>
    <li>Two</li>
    <li>Three
      <ul>
        <li>Three A</li>
        <li>Three B
          <ul>
            <li>Three B 2</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>


</body>

</html>

效果图：
在这里插入图片描述
原因：.ems:nth-last-of-type(1)选择的是含有 ems类名的元素ul，但由于该ul并不是同级别下ul的最后一个（含有rems类名的ul才是最后一个）。所以这句话并不对第二个ul生效。

对此，我们有两种解决方式：

方式一、使含有ems类名的标签作为同级别元素下的最后一个（推荐）

可对于两个含有ems的ul元素使用div进行包裹

<!DOCTYPE html>
<html>

<head>
  <style>
    html {
      font-size: 16px;
    }

    .ems:nth-last-of-type(1) li {
      font-size: 1.3em;
    }

    .rems li {
      font-size: 1.3rem;
    }
  </style>
</head>

<body>
  <!-- 在此添加div，使得这两个含有ems类名的ul元素包括在该div下 -->
  <div>
    <ul class="ems">
      <li>One</li>
      <li>Two</li>
      <li>Three
        <ul>
          <li>Three A</li>
          <li>Three B
            <ul>
              <li>Three B 2</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    <!-- 因而该ul则可作为同级别下ul元素的最后一个 -->
    <ul class="ems">
      <li>One</li>
      <li>Two</li>
      <li>Three
        <ul>
          <li>Three A</li>
          <li>Three B
            <ul>
              <li>Three B 2</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <ul class="rems">
    <li>One</li>
    <li>Two</li>
    <li>Three
      <ul>
        <li>Three A</li>
        <li>Three B
          <ul>
            <li>Three B 2</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>


</body>

</html>

效果图：
在这里插入图片描述

方式二、设置其真实的n值（不推荐）

对于该场景下，只需要把 .ems:nth-last-of-type(1) 改为 ems:nth-last-of-type(2)即可，因为含有ems类名的第二个ul标签其实是作为同级同类型标签下的倒数第二个

<!DOCTYPE html>
<html>

<head>
  <style>
    html {
      font-size: 16px;
    }

    .ems:nth-last-of-type(2) li {
      font-size: 1.3em;
    }

    .rems li {
      font-size: 1.3rem;
    }
  </style>
</head>

<body>
  <ul class="ems">
    <li>One</li>
    <li>Two</li>
    <li>Three
      <ul>
        <li>Three A</li>
        <li>Three B
          <ul>
            <li>Three B 2</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
  <ul class="ems">
    <li>One</li>
    <li>Two</li>
    <li>Three
      <ul>
        <li>Three A</li>
        <li>Three B
          <ul>
            <li>Three B 2</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

  <ul class="rems">
    <li>One</li>
    <li>Two</li>
    <li>Three
      <ul>
        <li>Three A</li>
        <li>Three B
          <ul>
            <li>Three B 2</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

</body>

</html>

效果图：
在这里插入图片描述
参考：https://blog.csdn.net/tinyleaf/article/details/81627782

JieFighting
关注
专栏目录
nth-child(x)与nth-of-type(x)用法
fairycode的博客
03-15 305
近期在复习前端，现在html css进行到form表单 即将进入js阶段：） 码码后想达到的效果大概如此 input text radio select textarea等 在html内给几个小标题用了同样的class <form action=""> <div class="title">姓名</div> <input type="text" > <div class="title">昵称</div&
CSS3 :nth-of-type() 选择器
天心天地生的博客
11-29 739
定义和用法 :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素. n 可以是数字、关键词或公式。 提示：请参阅 :nth-child() 选择器，该选择器选取父元素的第 N 个子元素，与类型无关。 亲自试一试 - 实例 实例 1 Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。 在这里，我们为奇数和偶数 p 元...
CSS中 nth-child 与 nth-of-type 的区别
最新发布
上进！努力！！！
09-11 775
nth-child和都是强大的CSS选择器，能够帮助我们更加灵活地选择和样式化页面元素。nth-child选择的是所有子元素的顺序，而只考虑同类型元素的顺序。在实际开发中，根据具体的需求选择合适的伪类选择器，能够使你的CSS更加简洁和高效。通过合理使用这两个选择器，可以简化很多复杂的样式逻辑，尤其是在处理动态内容或复杂的HTML结构时非常有用。
CSS3伪类选择器：nth-child()
weixin_30892037的博客
07-10 114
描述： 伪类:nth-child()的参数是an+b，如果按照w3.org上的描述，写成中文，很可能会让人头晕，再加上笔者的文笔水平有限，所以我决定避开an+b的说法，把它拆分成5种写法共5部分来说明。 第一种：简单数字序号写法 :nth-child(number) 直接匹配第number个元素。参数number必须为大于0的整数。 例子：li:nth-child(3){backgrou...
【99JS手记】之一：nth-child选择器
weixin_33831196的博客
01-02 343
为什么80%的码农都做不了架构师？>>> ...
在jQuery中添加：nth-​​of-type
CSS 初学者指南
06-24 128
$.expr[':']['nth-of-type'] = function(elem, i, match) { var parts = match[3].split("+"); return (i + 1 - (parts[1] || 0)) % parseInt(parts[0], 10) === 0; }; 有关添加其他“类型”选择器的更多信息，请参见原始文章 。 翻译自:...
详解CSS3中nth-child与nth-of-type的区别
09-24
在css3中有两个新的选择器可以选择父元素下对应的子元素，一个是:nth-child 另一个是:nth-of-type。 但是它们到底有什么区别呢？下面这篇文章主要就给介绍了CSS3中nth-child与nth-of-type的区别,需要的朋友可以参考...
详解CSS nth-child与nth-of-type的元素查找方式
01-19
nth-child和nth-of-type是css的两个伪选择符。应用中，这两者常常容易混淆。这里把它们拿出来仔细做个对比，看看这两者是怎么查找元素的。 nth-child(n) —— 寻找第n个子元素 nth-of-type(n) —— 寻找同一类型...
CSS3中:nth-child和:nth-of-type的区别深入理解
12-13
关于:nth-child和:nth-of-type的区别之前一直没太注意。最近打算深入了解一些CSS3，才发现里面其实暗藏玄机。 :nth-child可以选择父元素下的字元素，:nth-of-type也可以。但是它们到底有什么区别呢？ 其实区别很...
CSS选择器之:nth-child(n)与:nth-last-of-type(number)
weixin_33819479的博客
04-13 375
这段时间在做一些东西，整理了其中遇到的一个关于CSS选择器的问题。 需要完成一个下图的侧边栏效果： 乍一看，很简单嘛，标签列表、弹框，完工！ 然后我就写了如下代码： <ul class="tag radius-8"> //标签 <li class="a"> code </li> ...
比较jQuery:nth-of-type() 选择器和:nth-child()选择器
weixin_42056687的博客
07-21 204
1，说明：type : 类型 child : 孩子 代码说明： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选择器比较</title> <script
js选择器中:nth-of-child和:nth-of-type的区别
hvang1988的专栏
11-07 315
同级的多个元素，第y个是xx元素即xx:nth-child(y) 和 第y个xx元素 xx:nth-of-type(y) ；
nth-of-type() 详解
热门推荐
weixin_44051815的博客
12-29 1万+
nth-of-type() 详解 ele:nth-of-type(n)表示选择父元素下的第 n 个 ele 元素，其中 n 可以是正整数、公式或者关键字。同时， ele 一般是标签选择器。 <style> * { margin: 0; padding: 0; } .box { width: 400px; height: 200px; margin: 100px auto; border: 1px solid #ccc; }
：nth-of-type（n）和：nth-child（n）的基友关系
zhanglianglily的博客
04-23 5728
：nth-of-type（n）和：nth-child（n）的基友关系 2018年05月22日 21:50:46weixin_41957484阅读数：4053 一开始写样式的时候喜欢全部元素都来个class，后面发现这样一个页面下来很多个class，起名字起到发慌，然后老师说该多用 逻辑关系来写样式，就是这种第几个孩子啊这种，不知道你们有没有这种烦恼，要用的时候觉得哇，type和child这...
nth-of-type(n)选择器
09-18 704
“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是
js中td:nth-child()与.children("td").eq()之间的区别
weixin_33862041的博客
09-26 3604
为什么80%的码农都做不了架构师？>>> ...
图解伪类nth-child(n)和nth-of-type(n)
通俗易懂
04-25 931
nth-child(n)和nth-of-type(n)比较 代码 效果 nth-child(n)和nth-of-type(n)选择方式 注意： nth-child(n)和nth-of-type(n)：选择的下标是从1开始 关于两个伪类的n取值（可为表达式）： ...
CSS系列： css和js隔行变色（.box li:nth-of-type属性）
云端-公子清
12-09 546
两种方式让css隔行变色js和css3属性.box li:nth-of-type <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> ...
关于jQuery中nth-child和nth-of-type的详解
dengpi2643的博客
03-16 156
首先贴出来HTML的代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script&g...
nth-child和nth-of-type区别
03-28
nth-child和nth-of-type是CSS中的伪类选择器，用于选择元素的特定位置。 nth-child选择器选取父元素下的第n个子元素，无论其类型是什么。例如，nth-child(2)选取父元素下的第二个子元素。 nth-of-type选择器选取父元素下特定类型的第n个子元素。例如，nth-of-type(2)选取父元素下第二个与指定类型相同的子元素。 区别： 1. 对于nth-child选择器，它会选择父元素下的所有子元素，并根据位置进行筛选。而nth-of-type选择器只会选择与指定类型相同的子元素。 2. 如果父元素下的子元素中有不同类型的元素，nth-child选择器可能会选择到不同类型的元素，而nth-of-type选择器只会选择指定类型的元素。 3. 当使用nth-child选择器时，如果指定的位置超过了父元素下子元素的数量，将不会匹配任何元素。而nth-of-type选择器只会计算指定类型的子元素。 4. nth-child选择器和nth-of-type选择器都可以使用表达式来选择特定位置的子元素，例如：nth-child(2n+1)表示选择奇数位置的子元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值