Как выбрать среди нескольких элементов, имеющих одинаковые CSS?

Question

У меня есть несколько веб-элементов на моей странице, которые имеют тег span и имя класса как nav-label. Я использую веб-драйвер Selenium для автоматизации своего приложения, и мне нужно проверить третий такой элемент с помощью локатора cssSelector. Я легко могу сделать это, создав XPath. Я хочу знать, возможен ли CSS-эквивалентный селектор или нет.

Webelement:

<span class="nav-label">sometext</span>

Когда я пишу CSS как css=.nav-label, инспектор показывает, что есть 3 таких элемента. Теперь я хочу выбрать третий. Как я могу сделать это с помощью Css?

Я легко могу сделать это с помощью xpath, написав xpath как (//span[@class='nav-label'])[3]

Есть ли CSS-эквивалент вышеупомянутого XPath?

Answer 1

То, чего вы хотите достичь, невозможно с помощью селекторов CSS.

:nth-of-type() даст вам самое близкое значение, но оценивает только среди братьев и сестер и не найдет n-й предмет по уровням.

Вы можете использовать селектор CSS, чтобы идентифицировать все элементы с этим классом, а затем выбрать 3-й узел фильтра, но это не будет столь эффективно и потребует больше кода для обслуживания.

Если вы можете использовать XPath (//span[@class='nav-label'])[3], и он работает на вас, то придерживайтесь этого выражения XPath.