p:nth-​​child(2)和p:nth-​​of-type(2)之间有什么区别？

Question

p:nth-child(2)和之间有什么区别p:nth-of-type(2)？

根据W3Schools CSS选择器参考:

• p:nth-child(2):选择<p>作为其父级的第二个子元素的每个元素.
• p:nth-of-type(2):选择作为其父元素<p>的第二个<p>元素的每个元素.

所不同的似乎是其父母的孩子和<p> 其父母的元素.

如果我们已经<p>在两种情况下都提到了元素类型,并且关键字parent建立了父子关系,那么有什么区别呢？

Answer 1

因为p:nth-child(2)它选择其父元素的第二个元素,如果它是一个段落,而p:nth-of-type(2)将选择其父元素的第二个段落.如果您仍然感到困惑,请让我为您澄清一下.请考虑以下代码段:

<section>
   <h1>Words</h1>
   <p>Little</p>
   <p>Piggy</p>    <!-- Want this one -->
</section>

在这里,p:nth-child(2)将选择<p>Little</p>因为它是其父级的第二个子级,它是一个段落元素.

但是,在这里,p:nth-of-type(2)将选择<p>Piggy</p>因为它将在其父级的所有段落中选择第二段.

帮助来自: https ://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/

Answer 2

• p:nth-​​child(1):表示任何父级的第一个子级,属于段落类型.
• p:nth-​​of-type(1):表示任何父级中类型段落的第一次出现

p:nth-child(2){background:#f00;}
p:nth-of-type(2){background:#0f0;}

<div>
   <div>first child</div>
   <p>second child and first element of class "p"</p>
   <p>third child and second element of class "p"</p>
   <p>fourth child and third element of class "p"</p>
</div>

Answer 3

这个问题可能会提醒您:第一个孩子和第一个孩子有什么区别？- 事实上,两者之间可以有很多相似之处.这个问题与另一个问题大不相同的是任意整数参数X,如:nth-child(X)和:nth-of-type(X).它们在原理上与它们的"第一"和"最后"对应物类似,但潜在的匹配元素根据页面中的实际情况而有很大差异.

但首先是一些理论.请记住,简单的选择器是独立的条件.即使组合成复合选择器,它们仍保持独立.这意味着它们p既不受影响,也不影响,如何:nth-child()或:nth-of-type()匹配.以这种方式组合它们只是意味着元素必须同时匹配所有条件才能匹配.

事情变得有趣.这种独立匹配意味着我可以在简单英语方面表达复合(和复杂)选择器的方式非常有创意,而不会改变选择器的含义.事实上,我现在可以这样做的方式使得它们之间存在差异:nth-child(2)并且:nth-of-type(2)看起来非常重要,以至于伪类可能彼此完全无关(除了"兄弟姐妹"部分之外):

• p:nth-child(2):当且仅当它是一个p元素时,在其兄弟姐妹中选择第二个孩子.

• p:nth-of-type(2):选择p其兄弟姐妹中的第二个元素.

突然间,他们听起来真的不一样!这是一些解释有帮助的地方.

任何元素一次只能有一个子元素匹配:nth-child(X)任何整数X. 这就是为什么我首先提到它来强调"第二个孩子".另外,这个子元素只有匹配p:nth-child(X)时才会匹配p(请记住"type"是指标记名).这非常符合:first-child和:last-child(和,类似地,p:first-child和p:last-child).

:nth-of-type(X)另一方面,有两个方面:

1. 因为"type" :nth-of-type()与类型选择器中的"type"概念相同,所以这一类伪类被设计为与类型选择器一起使用(即使它们仍然独立运行).这就是为什么p:nth-of-type(2)可以简洁地表达为"选择p其兄弟姐妹中的第二个元素".它只是工作!

2. 然而,与:first-of-type和:last-of-type中,X要求有实际上是他们的父元素中同一类型的许多子元素.例如,如果只有一个是p它的父元素内,p:nth-of-type(2)将是父之内没有匹配,即使该p元素是保证匹配p:first-of-type和p:last-of-type(以及由此延伸,p:only-of-type).

举例说明:

<div class="parent">
  <p>Paragraph</p>
  <p>Paragraph</p>          <!-- [1] p:nth-child(2), p:nth-of-type(2) -->
  <p>Paragraph</p>
  <footer>Footer</footer>
</div>

<div class="parent">
  <header>Header</header>
  <p>Paragraph</p>          <!-- [2] p:nth-child(2) -->
  <p>Paragraph</p>          <!-- [3] p:nth-of-type(2) -->
  <footer>Footer</footer>
</div>

<div class="parent">
  <header>Header</header>
  <figure>Figure 1</figure>
  <p>Paragraph</p>          <!-- [4] -->
  <footer>Footer</footer>
</div>

<div class="parent">
  <header>Header</header>
  <p>Paragraph</p>          <!-- [2] p:nth-child(2) -->
  <figure>Figure 1</figure>
  <hr>
  <figure>Figure 2</figure> <!-- [5] .parent > :nth-of-type(2) -->
  <p>Paragraph</p>          <!-- [5] .parent > :nth-of-type(2) -->
  <p>Paragraph</p>
  <footer>Footer</footer>
</div>

什么是选中,什么不是,为什么？

1. 由两者选择p:nth-child(2)并且p:nth-of-type(2)
   此元素的前两个子元素都是p元素,允许此元素同时为同一个整数参数X匹配两个伪类,因为所有这些独立条件都为真:

   • 它是其父母的第二个孩子;
   • 它是一个p元素; 和
   • 它是p其父级中的第二个元素.

2. p:nth-child(2)仅选择
   此第二个子p元素是元素,因此它匹配p:nth-child(2).

   但它是第一个p元素(第一个孩子是a header),所以它不匹配p:nth-of-type(2).

3. p:nth-of-type(2)仅选择
   此p元素是p上面一个元素之后的第二个元素,但它是第三个子元素,允许它匹配p:nth-of-type(2)但不匹配p:nth-child(2).再次请注意,父元素一次只能有一个子元素匹配:nth-child(X)特定的X - 前一个元素p已占用:nth-child(2)此特定父元素上下文中的插槽.

4. 未选中
   此p元素是其父元素中唯一的元素,并且它不是它的第二个子元素.因此它既不匹配:nth-child(2)也不匹配:nth-of-type(2)(即使不是由类型选择器限定;见下文).

5. .parent > :nth-of-type(2)
   由此元素选择的是其父元素中的第二个类型.喜欢:first-of-type和:last-of-type,省略类型选择器允许伪类可能匹配同一父级中的多个元素.与他们不同,有多少实际上它会匹配取决于每个元素的多少键入其实有.

   这里有两个figure元素和三个p元素,允许:nth-of-type(2)匹配a figure和a p.但是只有一个header,一个hr和一个footer,所以它不会匹配任何这些类型的元素.

总而言之,:nth-child()并且:nth-of-type(),使用整数参数X(即不是An + B形式,系数A为n),函数与:first-child/ :last-child和:first-of-type/ 非常相似:last-of-type,主要区别在于参数以及页面本身,影响可以匹配多少个不同的元素:nth-of-type().

当然,还有一大堆更多:nth-child()与:nth-of-type()不仅仅是一个简单的整数参数,但不用说的细节和可能是其这个问题的范围之外.

Answer 4

其他答案强调了两个选择器之间的主要区别,即nth-child考虑同一容器内的所有元素(兄弟元素),nth-of-type并考虑同一容器内所有相同类型的元素.

的:nth-child(an+b)伪级符号代表具有一个+ B-1的元素的兄弟姐妹在文档树之前它^REF

的:nth-of-type(an+b)伪级符号代表具有一个+ B-1的元素的兄弟姐妹与相同的扩展的元素名称文档树之前,^裁判

由此我们可以在两个选择器之间添加另一个重要的区别,nth-of-type即通常与标签选择器一起使用nth-child而不需要标签选择器的事实.换句话说,nth-of-type可以选择多个元素,但nth-child只能选择一个元素.添加标签选择器nth-of-type会将选择限制为一个元素并添加标签选择器,nth-child只会为我们定位的一个元素添加更多限制.¹

第n个孩子()

这个选择器将选择第二个孩子.container.

.container :nth-child(2) {
  border:1px solid red;
}

<div class="container">
  <p>aaa</p>
  <p>aaa</p>
  <h1>title</h1>
  <p>aaa</p>
  <p>aaa</p>
  <p>aaa</p>
  <h1>title</h1>
</div>

这与上面的选择器相同,但我们添加了一个标签限制:找到第二个子节点.container,如果它是一个p标签,则选择它.

.container p:nth-child(2) {
  border:1px solid red;
}

<div class="container">
  <p>aaa</p>
  <p>aaa</p>
  <h1>title</h1>
  <p>aaa</p>
  <p>aaa</p>
  <p>aaa</p>
  <h1>title</h1>
</div>

如果我们换p用h1什么都不会被选中,因为第二个孩子是不是h1:

.container h1:nth-child(2) {
  border:1px solid red;
}

<div class="container">
  <p>aaa</p>
  <p>aaa</p>
  <h1>title</h1>
  <p>aaa</p>
  <p>aaa</p>
  <p>aaa</p>
  <h1>title</h1>
</div>

第n-的型()

此选择器将选择第2 p和第2 h1.nth-of-type将按照nth-child相同类型对元素进行分组后的行为.

.container :nth-of-type(2) {
  border:1px solid red;
}

<div class="container">
  <p>aaa</p>
  <p>aaa</p>
  <h1>title</h1>
  <p>aaa</p>
  <p>aaa</p>
  <p>aaa</p>
  <h1>title</h1>
</div>

所以我们在这里选择第二个孩子:

<div class="container">
  <p>aaa</p>
  <p>aaa</p> <-- this one -->
  <p>aaa</p>
  <p>aaa</p>
  <p>aaa</p>
</div>

那么第二个孩子在里面:

<div class="container">
  <h1>title</h1>
  <h1>title</h1> <-- this one -->
</div>

添加标签选择器只会将选择限制为仅一组元素:

.container p:nth-of-type(2) {
  border:1px solid red;
}
.container h1:nth-of-type(2) {
  border:1px solid green;
}

<div class="container">
  <p>aaa</p>
  <p>aaa</p>
  <h1>title</h1>
  <p>aaa</p>
  <p>aaa</p>
  <p>aaa</p>
  <h1>title</h1>
</div>

如果你的容器只包含一种类型的元素,那么两个选择器肯定会给出相同的结果但行为不一样(即背后的alogirthm会有所不同).您可能还注意到,如果从两者中删除标记选择器,您也会得到相同的结果:

.container :nth-of-type(2) {
  border:1px solid red;
}
.container :nth-child(2) {
  color:red;
}

/* The below will also select the same
  .container p:nth-child(2)
  .container p:nth-of-type(2)
  .container *:nth-child(2)
  .container *:nth-of-type(2)
*/

<div class="container">
  <p>aaa</p>
  <p>aaa</p>
  <p>aaa</p>
  <p>aaa</p>
  <p>aaa</p>
</div>

另一个区别(这是个人的想法)可能是两者的表现.nth-child可以更快,因为它一次考虑所有兄弟元素,所以我们将有一个循环来检查所有元素.nth-of-type需要不同时考虑不同类型的元素,所以我们可能会有更多的处理因此它更慢(这是我自己的结论基于两者的工作方式.我没有正式的证据).

^{1:我正在考虑使用nth-child/nth-of-type中的整数在一个容器内进行选择.}

Answer 5

假设我们有以下HTML:

<div id="content">
    <p>a1</p>
    <span>a2</span>
    <p>a3</p>
    <span>a4</span>
</div>

1)#content p:nth-child(2)- 适用于0个元素
因为p:nth-child(2)要求它是第二个子元素而且标签是p,但实际上标签是a <span>.

2)#content *:nth-child(2)- 苹果到<span>a2</span>
因为*:nth-child(2)只需要它是第二个孩子,不需要标签名称.*可以是任何标签名称.

3)#content p:nth-of-type(2).- 适用于<p>a3</p>
因为p:nth-of-type(2)意味着<p>节点列表中的第二个.

4)#content *:nth-of-type(2).- 适用于<p>a3</p>并且<span>a4</span>
因为*:nth-of-type(2)只需要在同一标签节点列表中的第二个.