nth-of-type против nth-child - PullRequest
Новая
       15

nth-of-type против nth-child

38 голосов
/ 16 февраля 2012

Меня немного смущает псевдокласс n-го типа и то, как он должен работать, особенно по сравнению с классом 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-типа?

Ответы [ 7 ]

33 голосов
/ 16 февраля 2012

Псевдокласс 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).

Вот отличная статья Криса Койера на эту тему @ CSS-Tricks.com

Причина, по которой вы ломаетесь, заключается в том, что тип относится к типу элемента (а именно, div), но первый div не соответствует упомянутым вами правилам (.row .label), поэтому правило не применяется.

Причина в том, что CSS анализируется справа налево , что означает, что браузер сначала просматривает :nth-of-type(1), определяет, что ищет элемент типа div , который также является первым типом, который соответствует элементу .row, и первым элементом .icon. Затем он читает, что элемент должен иметь класс .label, который не соответствует ни одному из вышеперечисленных.

Если вы хотите выбрать первый элемент метки, вам нужно либо обернуть все метки в их собственный контейнер, либо просто использовать nth-of-type(3) (при условии, что всегда будет 2 значка).

Другой вариант, (к сожалению) будет использовать ... подождите ... jQuery: 

$(function () {
    $('.row .label:first')
        .css({
            backgroundColor:"blue"
        });
});
7 голосов
/ 16 февраля 2012 
.label:nth-of-type(1)

«тип» здесь относится к типу элемента.В этом случае div, а не в классе.Это не означает, что первый элемент .label, это означает, что первый элемент его типа также имеет класс label.

. Нет элементов с классом labelимеют индекс 1 своего типа.

5 голосов
/ 25 апреля 2014

enter image description here

на рисунке из добавленных 10 элементов, 8 - <p> и 2 - <i>, два элемента заштрихованной детали указывают <i>, остальные восемь - <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*/
        }
1 голос
/ 18 октября 2017

Вот пример: 

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

1 голос
/ 11 июня 2017

Вот простой пример, показывающий разницу между 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;
}

Красный фон будет применен ко 2-му элементу p внутри div.

Это происходит потому, что nth-of-child в основном означает поиск тега nth p (в данном случае тег 2nd p)внутри контейнера

Использование nth-child 

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

Здесь css не применяется.

Это происходит потому, что nth-child в основном означает поиск n-го тега внутри контейнера (в этом случае второй тег - это div) и проверьте, является ли он тегом p

0 голосов
/ 19 января 2018 
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

0 голосов
/ 02 марта 2016

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...