如何在python selenium的css选择器中选择下一个立即元素？答案

【问题标题】：How to select next immediate element in css selector in python selenium?如何在python selenium的css选择器中选择下一个立即元素？
【发布时间】：2017-03-07 08:40:20
【问题描述】：

我的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()，因为我在 selenium css select 中使用这个选择器来查找元素。

【问题讨论】：

你问的是 CSS 还是 javascript？
如果.active 元素恰好位于<li> 元素的最后一个，会发生什么情况？
Is there a CSS parent selector?的可能重复
.active 在最后一个元素中不会发生在我的情况下。所以暂时不考虑

标签： javascript jquery html css selenium

【解决方案1】：

您可以使用: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。

【讨论】：

我们可以不使用 :has() 来实现吗？由于我在我的 selenium 查询中使用选择器。它不支持：has()。

【解决方案2】：

在 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>

【讨论】：