如何在css选择器中选择下一个直接元素

How to select next immediate element in css selector in python selenium?

本文关键字：下一个 元素 选择 css 选择器      更新时间：2023-09-26

DOM结构如下:

<ul>
  <li>
    <a href="#" role="button" class="js-pagination link" data-page="1">1</a>
  </li>
  <li>
    <a href="#" role="button" class="js-pagination link active" data-page="2">2</a>
  </li>
  <li>
    <a href="#" role="button" class="js-pagination link " data-page="3">3</a>
  </li>
  <li>
    <a href="#" role="button" class="js-pagination link " data-page="4">4</a>
  </li>
</ul>

我必须在包含class="js-pagination link active"的元素之后选择下一个直接元素(不是相邻元素)。在我们的例子中是第三个li元素。我尝试了以下css选择器

"ul li a[class='js-pagination link active'] + li"

但它不工作，因为它在寻找a标签的同一水平的li。如何使用css选择器呢?

我不能使用。has()，因为我使用这个选择器在硒css选择查找元素

您可以使用:has()来选择li和a.js-pagination.link.active，然后使用.next()来选择下一个li元素。

$('li:has(a.js-pagination.link.active)').next('li')


$('li:has(a.js-pagination.link.active)').next('li').css('background', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#" role="button" class="js-pagination link" data-page="1">1</a></li>
  <li><a href="#" role="button" class="js-pagination link active" data-page="2">2</a></li>
  <li><a href="#" role="button" class="js-pagination link " data-page="3">3</a></li>
  <li><a href="#" role="button" class="js-pagination link " data-page="4">4</a></li>
</ul>

在css中也没有:has()选择器，所以唯一的方法是使用js。

在jquery中，您可以找到.active类，获得它的parent()类和next()类

$('.active').parent().next().css('background', 'green');


  $('.active').parent().next().css('background', 'green');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#" role="button" class="js-pagination link" data-page="1">1</a></li>
  <li><a href="#" role="button" class="js-pagination link active" data-page="2">2</a></li>
  <li><a href="#" role="button" class="js-pagination link " data-page="3">3</a></li>
  <li><a href="#" role="button" class="js-pagination link " data-page="4">4</a></li>
</ul>

相关文章：