p:nth child(2)和p:nth type(2)有什么区别?

这个问题可能会提醒你 What is the difference between :first-child and :first-of-type? _ 可以 在两者之间画。这个问题与另一个问题有很大不同的地方是任意整数参数x,如 :nth-child(X) 和 :nth-of-type(X) . 原则上,它们与“第一”和“最后”对应物相似,但潜在的匹配元素不同。 大大地 基于页面中的实际内容。

但首先,一些理论。记住 simple selectors are independent conditions . 即使组合成复合选择器,它们也保持独立。这意味着 p 既不受,也不受影响,如何 :nth-child() 或 :nth-of-type() 比赛。以这种方式组合它们只意味着元素必须匹配它们的所有条件 同时 为了匹配。

这里是事情变得有趣的地方。这种独立的匹配意味着我可以用简单的英语表达复合(和复杂)选择器。 不改变选择器的含义 . 事实上,我现在可以这样做,在某种程度上 :nth-child(2) 和 :nth-of-type(2) 似乎非常重要,以至于伪类可能完全不相关(除了“兄弟”部分)。

• p:nth-child(2) :如果且仅当第二个子级是 磷 元素。

• p:nth-of-type(2) :选择第二个 磷 元素的兄弟元素。

突然之间,他们听起来真的很不一样!这就是解释的地方。

任何元素只能有一个子元素匹配 第n个孩子(X) 一次用于任意整数x。这就是为什么我选择先提到“第二个孩子”来强调这一点。此外,此子元素将只匹配 p:nth-child(X) 如果它恰好是 磷 (记住“类型”指的是标记名)。这很符合 :first-child 和 :last-child (同样地, p:first-child 和 p:last-child )

有两个方面 n:类型(x) 另一方面:

1. 因为“输入”在 NTH-OF-型() 与类型选择器中的“类型”概念相同,此伪类族是 设计用于与类型选择器一起使用 (即使它们仍然独立运行)。这就是为什么 P:N型(2) 可以简明扼要地表示为“选择第二个 磷 元素在它的兄弟中,“它只是工作!

2. 然而,不像 :first-of-type 和 :last-of-type ,x要求父元素中实际上存在许多相同类型的子元素。例如,如果只有一个 磷 元素在其父元素中, P:N型(2) 不会在父对象中匹配任何内容,即使 磷 元素保证匹配 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. 由两者选择 第n个孩子(2) 和 P:N型(2)
   此元素的前两个子元素都是 磷 元素,允许此元素同时匹配同一整型参数x的两个伪类,因为所有这些独立条件都为真:

   • 它是它父母的第二个孩子;
   • 这是一个 磷 元素;
   • 是第二次 磷 元素在其父级中。

2. 通过选择 第n个孩子(2) 只有
   第二个孩子是 磷 元素,因此它确实匹配 第n个孩子(2) .

   但它是 第一 磷 要素 (第一个孩子是 header ,所以不匹配 P:N型(2) .

3. 通过选择 P:N型(2) 只有
   这个 磷 元素是第二个 磷 元素,但它是第三个子元素,允许它匹配 P:N型(2) 但不是 第n个孩子(2) . 再次记住,父元素只能有一个子元素匹配 第n个孩子(X) 对于一个特定的X,一次前一个 磷 已经开始 第n个孩子(2) 在这个特定父元素的上下文中插入插槽。

4. 未选中
   这个 磷 元素是它的父元素中唯一的一个,它不是它的第二个子元素。因此两者都不匹配 第n个孩子(2) 也不 第n类(2) (即使不是由类型选择器限定;请参见下文)。

5. 通过选择 .parent > :nth-of-type(2)
   此元素是其父元素中其类型的第二个。喜欢 第一类 和 最后的类型 如果不使用类型选择器,则伪类可以潜在地匹配同一父类中的多个元素。不像他们, 有多少 它实际上是匹配的,这取决于实际存在的每种元素类型的数量。

   这里,有两个 figure 元素和三 磷 元素,允许 第n类(2) 匹配一个 图形 和A 磷 . 但只有一个 页眉 ,一 hr 和其中一个 footer ,因此它将不匹配任何这些类型的元素。

总之, nth-() 和 NTH-OF-型() ,对于整型参数x(即不采用系数a为n的a n+b形式),函数与 第一个孩子 / 最后的孩子 和 第一类 / 最后的类型 主要区别在于,参数和页面本身会影响可以与多少个不同元素匹配 NTH-OF-型() .

当然,还有很多事情要做 nth-() 和 NTH-OF-型() 不仅仅是一个简单的整数参数,更不用说它的细节和可能性超出了这个问题的范围。

为了 p:nth-child(2) 如果是段落,则选择其父元素的第二个元素,而 p:nth-of-type(2) 将选择其父元素的第二段。如果你还是很困惑,让我为你澄清一下。考虑下面的代码段:

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

在这里, 第n个孩子(2) 将选择 <p>Little</p> 因为它是其父元素的第二个子元素,也是段落元素。

但是,在这里, P:N型(2) 将选择 <p>Piggy</p> 因为它将在其父级的所有段落中选择第二个段落。

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

• p:nth child(1):表示这是任何父级的第一个子级,属于段落类型。
• p:nth类型(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>

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

这个 :nth-child(an+b) 伪类表示法表示一个元素 有a+b-1 兄弟姐妹 在文档树中它之前 ^ref

这个 :nth-of-type(an+b) 伪类表示法表示具有+B-1的元素 兄弟姐妹 具有 相同的扩展元素名称 在文档树中它之前 ^ref

从这里我们可以添加另一个 重要的 两个选择器之间的区别是 n型 通常与标记选择器一起使用,而 第n个孩子 不需要标签选择器。换言之, n型 可以选择 多个元素 但是 第n个孩子 可以选择 只有一个元素 . 添加标签选择器 n型 将选择限制为一个元素并将标记选择器添加到 第n个孩子 只会对 一元素 我们的目标是。 ^一

nth-()

此选择器将选择 .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>

这与上面的选择器相同,但我们添加了一个标记限制:查找 容器 ,如果是 p 标记然后选择它。

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

<div class=“container”>
<P>AAA</P>
<P>AAA</P>
<h1>标题</h1>
<P>AAA</P>
<P>AAA</P>
<P>AAA</P>
<h1>标题</h1>
&L/DIV & GT;

如果我们改变 磷 具有 h1 不会选择任何内容,因为第二个孩子不是 H1 :

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

<div class=“container”>
<P>AAA</P>
<P>AAA</P>
<h1>标题</h1>
<P>AAA</P>
<P>AAA</P>
<P>AAA</P>
<h1>标题</h1>
&L/DIV & GT;

NTH-OF型()

此选择器将选择第2个 磷 和第二 H1 . n型 会表现得像 第n个孩子 按相同类型对元素分组后。

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

<div class=“container”>
<P>AAA</P>
<P>AAA</P>
<h1>标题</h1>
<P>AAA</P>
<P>AAA</P>
<P>AAA</P>
<h1>标题</h1>
&L/DIV & GT;

所以我们选择了里面的第二个孩子:

<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>标题</h1>
<P>AAA</P>
<P>AAA</P>
<P>AAA</P>
<h1>标题</h1>
&L/DIV & GT;

如果您的容器仅包含 一种 元素的两个选择器都将 无疑 给出相同的结果,但不会表现出相同的行为(即,后面的算法将不同)。 您还可能注意到,如果从这两个选项中删除标记选择器,也会得到相同的结果:

.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>

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

^{1:我正在考虑在一个容器内使用类型为nth child/nth的整数进行选择。}

假设我们有以下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 但实际上标签是 <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) 只需要同一标记节点列表中的第二个。

p:nth-child 选择器,在“纯英语”中,表示在以下情况下选择一个元素:

• 它是段落元素
• 它是父级的第二个子级(如果父级的第二个子级不是 <p> CSS将不起作用)

p:nth-of-type “纯英语”中的选择器指:

• 选择第二段 <P & GT; 父母的孩子(关心 <P & GT; ,列出所有的孩子 <P & GT; 并采取)

.first p:nth-child(2) {
  background: blue // this css not effect
}

.first p:nth-of-type(2) {
  background: red
}

<div class="first">
  <p>This is 1st paragraph</p>
  <div>This is a div</div>
  <p>This is 2nd paragraph</p>
</div>

AS MDN 说:

这个 nth-() CSS伪类根据元素在一组同级中的位置匹配元素。

那意味着 p:nth-child(2) 只捕获 <p> 元素是其父级的第二个子级。

然而, p:nth-of-type(2) 将捕获 <P & GT; 元素是其父元素的第二个元素, 不考虑元素的索引 . 这意味着一个元素可以有100个子元素,如果最后一个子元素是它的兄弟元素中的第二个段落元素,它将受到所列样式的影响。

要记住的一些事情(还没有说过):

元素是 nth-child(1) 和 nth-of-type(1)

这是 永远真实 .

元素是 nth-child(2) 和 nth-of-type(2)

当元素的前2个子元素属于同一类型时,这是正确的。

元素是 nth-child(3) 和 类型n(2)

当元素的第一个子元素和第三个子元素的类型相同,但第二个子元素的类型不同时,这是正确的。

元素是 第n个孩子(2) 和 nth-of-type(3)

这是 总是假 作为其类型的第三个元素,不能是其父级的第二个子级。

例子:

p:nth-child(2)   { color: red; }
p:nth-of-type(2) { background-color: yellow; }

<div>
  <p>Paragraph 1</p> <!-- p:nth-child(1), p:nth-of-type(1) -->
  <p>Paragraph 2</p> <!-- p:nth-child(2), p:nth-of-type(2) -->
  <span></span>
</div>

<hr />

<div>
  <p>Paragraph 1</p> <!-- p:nth-child(1), p:nth-of-type(1) -->
  <span></span>
  <p>Paragraph 2</p> <!-- p:nth-child(3), p:nth-of-type(2) -->
</div>

p:nth-child(2) :这将选择所有 <p> 元素是其父元素中的第二个元素。第一个元素可以是任何其他元素。例如

<div>
    <h1>Title</h1>
    <p>Paragraph</p> ** p:nth-child(2)
    <p>Paragraph</p>
</div>

<div>
    <p>Paragraph</p>
    <p>Paragraph</p> ** p:nth-child(2)
    <p>Paragraph</p>
</div>

<div>
    <p>Paragraph</p>
    <h1>Text</h1>
    <p>Paragraph</p> ** None are selected
</div>

p:nth-of-type(2) :这将选择所有 <P & GT; 第二次出现的元素 <P & GT; 元素在其父元素中。

<div>
    <h1>Title</h1>
    <p>Paragraph</p>
    <p>Paragraph</p> ** p:nth-of-type(2)
</div>

<div>
    <h1>Title</h1>
    <h2>Subtitle</h2>
    <p>Paragraph</p>
    <h2>Subtitle</h2>
    <h2>Subtitle</h2>
    <h2>Subtitle</h2>
    <p>Paragraph</p> ** p:nth-of-type(2)
</div>

<div>
    <h1>Title</h1>
    <p>Paragraph</p> ** None are selected
</div>