В других ответах подчеркивалось основное различие между обоими селекторами, которое заключается в том, что nth-child будет учитывать все элементы в одном контейнере (элементы одного уровня) и nth-of-type будет считать всеэлементы с одинаковым типом внутри одного контейнера .
Запись псевдокласса :nth-child(an+b) представляет элемент с + b-1 родственными элементами перед нимв дереве документов ref
Запись псевдокласса :nth-of-type(an+b) представляет элемент, имеющий + b-1 родственных элементов с то же самое расширенное имя элемента перед ним в дереве документов ref
Из этого мы можем добавить еще важный разница между обоими селекторами заключается в том, что nth-of-type обычно используется с селектором тегов, тогда как nth-child не нуждается в селекторе тегов.Другими словами, nth-of-type может выбрать более одного элемента , но nth-child может выбрать только один элемент .Добавление селектора тега с помощью nth-of-type ограничит выбор одним элементом, а добавление селектора тега к nth-child просто добавит больше ограничений к одному элементу , на который мы нацеливаемся. 1
nth-child ()
Этот селектор выберет 2-го дочернего элемента .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>
nth-of-type ()
Этот селектор выберет 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>
Если ваш контейнер содержит только один тип элемента, оба селектора будут наверняка даст то же самоерезультат, но не будет вести себя одинаково (т. е. алогирт позади будет другим).Вы также можете заметить, что если вы удалите селектор тегов из обоих, вы также получите тот же результат:
.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.