如何使用 css 选择器 nth-of-type 和 nth-child 在 Python Selenium 中定位元素

Question

下面是如何设置页面的 sn-p。

<class id="class1">
  <ul>
    <li>
      <strong>section 1</strong>
      <a href="link.com/home1">some link 1</a>
    <li>
      <strong>section 2</strong>
      <a href="link.com/home">some link 2</a>
<class id="class1">
  <ul>
    <li>
      <strong>section 3</strong>
      <a href="link.com/home/abc">some link 3</a>
    <li>
      <strong>section 4</strong>
      <a href="link.com/home/def">some link 4</a>

如何在第 2 部分找到 link.com/home？

我认为这会起作用：

.class1:nth-of-type(1) li:nth-child(2) [href*="/home"]

但事实并非如此。它也在第 4 节中找到了链接。我必须使用 *= 因为在不同的环境中 url 前缀会发生变化。

Answer 1

为了完整起见，我在合适的地方添加了</li>、</ul>和</class>标签HTML 将是：

<class id="class1">
  <ul>
    <li>
      <strong>section 1</strong>
      <a href="link.com/home1">some link 1</a>
    </li>
    <li>
      <strong>section 2</strong>
      <a href="link.com/home">some link 2</a>
    </li>
  </ul>
</class>
<class id="class1">
  <ul>
    <li>
      <strong>section 3</strong>
      <a href="link.com/home/abc">some link 3</a>
    </li>
    <li>
      <strong>section 4</strong>
      <a href="link.com/home/def">some link 4</a>
    </li>
  </ul>
</class>

要定位 第 2 节 的 href 属性，您可以使用以下任一Locator Strategies：

• 使用nth-child()：

  class#class1 > ul li:nth-child(2) a[href$="home"]
  

• 使用nth-child()：

  class#class1 > ul li:nth-of-type(2) a[href$="home"]
  

---

解决方案

要打印 href 属性的值，您可以使用以下任一Locator Strategies：

• 使用nth-child():

  print(driver.find_element(By.CSS_SELECTOR, "class#class1 > ul li:nth-child(2) a[href$='home']").get_attribute("href"))
  

• 使用nth-child():

  print(driver.find_element(By.CSS_SELECTOR, "class#class1 > ul li:nth-of-type(2) a[href$='home']").get_attribute("href"))
  

---

tl;博士

What is the difference between p:nth-child(2) and p:nth-of-type(2)?