Можете ли вы иметь селектор CSS с индексом массива в середине

Question

Привет, я пытаюсь запустить это, но это не работает:

document.querySelectorAll('div[2] div ul li a');

если я удаляю [2], то это происходит, или если я запрашиваю его отдельно и сохраняю в переменной, а затем запрашиваю эту переменную, тогда это работает:

var div = document.querySelectorAll('div')[2];
div.querySelectorAll('div ul li a');

Можно ли как-нибудь запросить все это за один раз на консоли chrome? Я провел некоторое исследование и наткнулся на что-то еще, называемое nth child и type, но мне любопытно, может ли этот способ работать тоже.

Answer 1

Если вы хотите последовательно выбирать узлы один за другим в одном запросе, попробуйте

document.querySelectorAll('div')[2].querySelectorAll('div ul li a')

Answer 2

Насколько я знаю, не существует такой вещи, как индексы массива для селекторов CSS.

Как вы упомянули, вы можете использовать : nth-child () для этой цели.

document.querySelectorAll('div:nth-child(2) div ul li a');

В этом случае селектор сопоставляет все элементы a в li элементах в ul элементах в div элементах в элементы div , являющиеся вторым дочерним элементом другого элемента.

Обратите внимание, что вы должны держать селекторы как можно короче, чтобы улучшить производительность.