Ответ 1
Что такое: nth() селектор?
В отличие от других ответов :nth() - это не селектор псевдокласса CSS.
Это малоизвестный позиционный селектор, используемый в Sizzle engine:
:nth:Находит элементnthна странице.
Вы найдете приведенное выше определение здесь, в документации Github для Sizzle.
Почему он выбирает разные элементы для: nth-child()/: nth-of-type()?
Причина, по которой nth() и ваши другие селекторы выбирают разные элементы, состоит в том, что nth() является индексом с нулевым индексом, в то время как селектор CSS один индекссильные > селекторы.
Понятно, как это может сбивать с толку, поскольку большинство из них предположило бы, что nth() будет поддерживать некоторую согласованность с аналогичными псевдо-классами селекторов классов CSS, такими как nth-child() и nth-of-type(), однако, как уже упоминалось, они aren На самом деле это связано.
Итак,: nth() функциональность фактически ближе к: eq(), то?
Да. На самом деле кажется, что nth() в точности совпадает с eq():
Expr.pseudos["nth"] = Expr.pseudos["eq"];
Этот старый список рассылки (2007) подразумевает, что Джон Ресиг планировал удалить селектор :nth() из-за этого:
"Я обыскал группы, но, похоже, я не могу найти связанных разговоров это. Что, если таковые имеются, - это разница между использованием
:eq(n)и:nth(n)? Я хотел бы знать, прежде чем начинать стандартизацию одного или Другие. Спасибо." - Мэтт Пеннер"Они одинаковы, поэтому вы можете использовать то, что вы предпочитаете. Из jquery.js:
nth: "m[3]-0==i",eq: "m[3]-0==i"" - Карл Сведберг"Да... Мне, наверное, следовало бы укусить
:nth()". - Джон Ресиг
Но, как вы заметили, удаление селектора :nth() никогда не материализовалось (по состоянию на 2013 год, во всяком случае).
Использование примера:
HTML:
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
JQuery
$('p:nth(2)').text(); // Returns 3 as zero-based index.
$('p:eq(2)').text(); // Returns 3 as zero-based index.
$('p:nth-child(2)').text(); // Returns 2 as one-based index.
$('p:nth-of-type(2)').text(); // Returns 2 as one-based index.