nth-of-type vs nth-child

Posted 2023-03-06

技术标签:

【中文标题】nth-of-type vs nth-child【英文标题】： 【发布时间】：2012-03-07 23:57:10 【问题描述】：

我对@987654321@ 伪类以及它应该如何工作感到有些困惑——尤其是与nth-child 类相比。

也许我有错误的想法，但鉴于这种结构

<div class="row">
    <div class="icon">A</div>
    <div class="icon">B</div>
    <div class="label">1</div>
    <div class="label">2</div>
    <div class="label">3</div>
</div>

..第三个子元素（第一个带有类标签）应该（也许？）可以选择

.row .label:nth-of-type(1) 
    /* some rules */

但是，至少在此处的 chrome 中，它不会选择它。只有当它是行中的第一个子元素时它才会起作用，这与 nth-child 相同 - 因此，它与 nth-of-type 有什么区别？

【问题讨论】：

我想知道这一切会在哪里中断（ie8 和之前肯定） IE8 及更低版本肯定不支持它，但几乎其他一切都很好（包括 IE9） 【参考方案1】：

nth-child 伪类指的是“第 N 个匹配的子元素”，这意味着如果你的结构如下：

<div>
    <h1>Hello</h1>

    <p>Paragraph</p>

    <p>Target</p>
</div>

然后p:nth-child(2) 将选择第二个也是 ap 的子元素（即带有“段落”的p）。p:nth-of-type 将选择第二个匹配的p 元素,（即我们的目标p）。

Here's a great article on the subject by Chris Coyier @ CSS-Tricks.com

您的中断的原因是因为type是指元素的类型（即div），但第一个div与您提到的规则（.row .label）不匹配，因此该规则不适用。

原因是，CSS is parsed right to left，表示浏览器首先查看:nth-of-type(1)，确定它搜索的是div类型的元素，这也是它的第一个类型，匹配 .row 元素和第一个 .icon 元素。然后它读取该元素应该具有.label 类，它与上述任何内容都不匹配。

如果您想选择第一个标签元素，您要么需要将所有标签包装在它们自己的容器中，要么只需使用nth-of-type(3)（假设总是有 2 个图标）。

另一种选择，（可悲）是使用...等待它... jQuery：

$(function () 
    $('.row .label:first')
        .css(
            backgroundColor:"blue"
        );
);

【讨论】：

【参考方案2】：

图中添加的10个元素中，8个为<p>，2个为<i>，两个阴影部分元素表示<i>，其余8个为<p>

页面的 css 放在这里：

<style>
    * 
        padding: 0;
        margin:0;
    
    section p 
        width: 20px;
        height: 20px;
        border:solid 1px black;
        border-radius: 15px;
        margin:20px;
        float: left;
    
    section i 
        width: 20px;
        height: 20px;
        border:solid 1px black;
        border-radius: 15px;
        margin:20px;
        float: left;
    
   section p:nth-child(1) 
        background-color: green; /*first-child of p in the flow*/
    
   section i:nth-child(1) 
        background-color: red;  /*[first-child of i in the flow]NO */
    
   section i:nth-of-type(1) 
        background-color: blue;  /*the type i of first child in the flow*/
    
    </style>

</head>

<body>

    <section>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <i></i>
        <p></p>
        <i></i>
        <p></p>
        <p></p>
        <p></p>
    </section>
</body>

第一个绿色灯泡表示

 section p:nth-child(1) 
                background-color: green; /*first-child of p in the flow*/

代码中的第二个红色灯泡不起作用，因为 i 不是流程中的第一个元素

section i:nth-child(1) 
            background-color: red;  /*[first-child of i in the flow]NO */

而图中蓝色的灯泡表示流中的第一种i

section i:nth-of-type(1) 
            background-color: blue;  /*the type i of first child in the flow*/

【讨论】：

【参考方案3】：

.label:nth-of-type(1)

这里的“type”是指元素的类型。在这种情况下，div，而不是班级。这并不表示第一个元素是.label，而是表示其类型的第一个元素也有一个label 类。

没有属于label 类的元素位于其类型的索引1。

【讨论】：

【参考方案4】：

这是一个简单的例子，它显示了 nth-child 与 nth-of-type 之间的区别。

考虑下面的html

<div>
<p>I am first</p>
<div>I am secong</div>
<p>I am 3rd</p>
</div>

使用 nth-of-child

p:nth-of-child(2)
    background:red;

红色背景将应用于 div 内的第二个 p 元素。

发生这种情况是因为 nth-of-child 基本上意味着在容器内找到第 n 个 p 标签（在本例中为第 2 个 p 标签）

使用第 n 个孩子

p:nth-child(2)
    background:red;

这里没有应用 css。

这是因为 nth-child 基本上意味着在容器中找到第 n 个标签（在这种情况下，第二个标签是 div）并检查它是否是 p 标签

【讨论】：

【参考方案5】：

这是一个例子：

<div>
    <div >0</div>
    <div >1</div>
    <div >2</div>
    <div >3</div>
    <div >4</div>
    <div >5</div>
</div>

此选择器：div div:nth-child(1) 将选择 div 的第一个子元素，但另一个条件是子元素必须是 div。这里第一个孩子是<div>0</div>，但如果第一个孩子是一个段落p：<p>0</p>这个选择器不会影响页面，因为没有第一个孩子div第一个孩子是p。

但是这个选择器：div div:nth-of-type(1) 如果第一个孩子是 <div>0</div> 会影响它，但是如果第一个孩子是 <p>0</p> 现在他会影响第二个孩子 <div>1</div> 因为它是他类型的第一个孩子div.

【讨论】：

【参考方案6】：

element:nth-of-type(p) //p=integer , basically return the DOM Element with respect of body.
Let us understand this with an example



     <html>
        <head>
        </head>
        <body>
          <div>
            <p> This is paragraph in first div</p>
           <input type="text" placeholder="Enter something"/>
            <p>This is a paragraph </p>
          </div>
          <div>
            <p>This is paragraph in second div</p>
            <ul>
            <li>First Item</li>
            <li>Second Item</li>
            <li>
             <label> This is label <strong>inside Unordered List</strong></label>
            </li>

          </ul>

           </div>
        </body>
    </html>


**This above html will look like this.**

Now suppose We have to style Second Item in UnOrderd list.
In this case we can use nth-of-type(index) selector wrt DOM body.

we can achieve styling like this

<style type="text/css">
                div:nth-of-type(2) li:nth-of-type(2)
                    color: red;
                    font-weight: bold;
                
            </style>

explanation : div:nth-of-type(2) by this we are trying to tell find the second div in html body,after that we have second div accessible ,now we can dig inside div using same nth-of-type selector,next we are using li:nth-of-type(2) so now we can find second list inside second div and styling it .

Final Code :



     <html>
            <head>
                <style type="text/css">
                    div:nth-of-type(2) li:nth-of-type(2)
                        color: red;
                        font-weight: bold;
                    
                </style>
            </head>
            <body>
              <div>
                <p> This is paragraph in first div</p>
               <input type="text" placeholder="Enter something"/>
                <p>This is a paragraph </p>
              </div>
              <div>
                <p>This is paragraph in second div</p>
                <ul>
                <li>First Item</li>
                <li>Second Item</li>
                <li>
                 <label> This is label <strong>inside Unordered List</strong></label>
                </li>

              </ul>

               </div>
            </body>
        </html>

**And Final output will look like this**

【讨论】：

【参考方案7】：

:nth-of-type 用于选择特定类型的同级。我所说的类型是指<li>、<img>、<div> 等中的标签类型。

:nth-child 用于选择特定父标签的子标签，而不考虑类型

:nth-of-type 的示例

HMTL：

  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
    <li>Item 13</li>
    <li>Item 14</li>
    <li>Item 15</li>
    <li>Item 16</li>
  </ul>

CSS：

注意<li> 标记和伪类nth-of-type 之间没有空格。

li:nth-of-type(odd) background-color: #ccc;

结果： https://jsfiddle.net/79t7y24x/

:nth-child 的示例

HTML：

  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
    <li>Item 13</li>
    <li>Item 14</li>
    <li>Item 15</li>
    <li>Item 16</li>
  </ul>

CSS：

注意这里<ul>标签和:nth-child伪类之间有一个空格

ul :nth-child(even) background-color: red

结果：https://jsfiddle.net/o3v63uo7/

【讨论】：

以上是关于nth-of-type vs nth-child的主要内容，如果未能解决你的问题，请参考以下文章

查漏补缺——说说:nth-of-type(3n)选择器

IE8：用啥代替 nth-of-type(n)？

CSS3中:nth-child和:nth-of-type的区别深入理解

CSS选择器之:nth-child()和:nth-of-type()的使用

nth-child和:nth-of-type的区别

nth-of-type和nth-child