nth-of-type vs nth-child

时间：2012-02-16 15:13:37

标签： css

我对nth-of-type伪类有点困惑，以及它应该如何工作 - 特别是与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有什么区别？

7 个答案:

答案 0 :(得分：33)

nth-child伪类引用“第N个匹配的子元素”，这意味着如果您有如下结构：

<div>
    <h1>Hello</h1>

    <p>Paragraph</p>

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

然后p:nth-child(2)将选择第二个也是p的子项（即带有“段落”的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"
        });
});

答案 1 :(得分：7)

.label:nth-of-type(1)

“type”这里指的是元素的类型。在这种情况下，div，而不是课程。这并不意味着第一个元素是.label，而是指其类型的第一个元素，它也有一个label类。

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

答案 2 :(得分：5)

enter image description here

图片中添加了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*/
            }

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

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 :(得分：1)

Heres是一个简单的例子，它显示了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标签）

使用nth-child 

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

这里没有应用css。

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

答案 4 :(得分：1)

以下是一个例子：

<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的第一个子节点，但另一个条件是child必须是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类型的第一个孩子。

答案 5 :(得分：0)

: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/

答案 6 :(得分：0)

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

enter image description here 

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

enter image description here

相关问题
最新问题