这两个东西简直无语，不常用根本记不住。已经记不清在网上搜过多少教程了，今天就自己写一个教程。

Xpath选择器

XPath 是一种用于在 XML 或 HTML 文档中进行导航和查找元素的语言。

这里咱们使用到最多的就是①，②，③，④，⑥，好吧，基本都用到了，这里还是要掌握的。

调试自己写的Xpath到底对不对：

  • 通过在浏览器的开发者工具中的 “Elements” 或 “Inspect” 面板中使用 XPath 选择器来调试和测试 XPath 表达式的准确性。
  1. 选择元素：
    • 选择所有元素：//*
    • 选择指定标签的元素：//tagname
    • 选择指定 class 的元素：//*[@class='classname']
    • 选择指定 id 的元素：//*[@id='idname']
  2. 精确匹配属性：
    • 通过属性值精确匹配元素：//*[@attribute='value']
  3. 层级关系选择：
    • 选择父子关系的元素：//parent/child
    • 选择所有后代元素：//ancestor//descendant
  4. 位置选择：
    • 选择第一个匹配的元素：(//element)[1]
    • 选择倒数第二个匹配的元素：(//element)[last()-1]
  5. 多条件选择：
    • 通过 AND 条件选择元素：//*[condition1 and condition2]
    • 通过 OR 条件选择元素：//*[condition1 or condition2]
  6. 文本内容选择：
    • 选择包含指定文本的元素：//*[contains(text(),'text')]

详细用法

  1. 选择元素：使用标签名直接选择元素。

    示例：

    • //div：选取所有 <div> 元素。
    • //a：选取所有 <a> 元素。

  2. 选择属性：使用 @ 符号选择属性。

    示例：

    • //div[@class='container']：选取 class 属性值为 container 的 <div> 元素。
    • //a[@href='#']：选取 href 属性值为 # 的 <a> 元素。

  3. 选择子元素：使用斜杠 / 定位子元素。

    示例：

    • //div/a：选取所有 <div> 元素下的 <a> 子元素。

  4. 选择相邻元素：使用紧邻着的加号 + 选择相邻元素。

    示例：

    • //div + p：选取紧接在 <div> 元素后的 <p> 元素。

  5. 选择父元素：使用双点 .. 选择父元素。

    示例：

    • //a/../div：选取 <a> 元素的父元素 <div>。

  6. 选择文本内容：使用 text() 函数选择元素的文本内容。

    示例：

    • //div/text()：选取 <div> 元素的文本内容。
    • //a/text()：选取 <a> 元素的文本内容。

  7. 选择包含特定文本的元素：使用 contains() 函数选择包含特定文本的元素。

    示例：

    • //div[contains(text(), 'Hello')]：选取文本内容包含 “Hello” 的 <div> 元素。

CSS选择器

CSS 选择器是一种用于选择 HTML 或 XML 文档中特定元素的语法。使用 CSS 选择器，可以根据元素的属性、标签名、类名、id 等多个条件来选取要样式化的 HTML 元素。

这里用的最多的就是类选择器，id选择器，属性选择器，其中id选择器（如果某个id值唯一）是最方便的。

  • 标签选择器

标签选择器用于选择所有指定标签的元素。例如，要选择所有段落元素，可以使用 p 选择器：

1
2
3
cssCopy Codep {
  color: red;
}
  • 类选择器

类选择器用于选择具有相同类名的所有元素。例如，要选择所有带有类名为 “my-class” 的元素，可以使用 .my-class 选择器：

1
2
3
cssCopy Code.my-class {
  font-size: 18px;
}
  • id 选择器

id 选择器用于选择具有特定 id 属性的元素。id 属性在 HTML 中应该是唯一的。例如，要选择具有 id 为 “my-element” 的元素，可以使用 #my-element 选择器：

1
2
3
cssCopy Code#my-element {
  background-color: yellow;
}
  • 后代选择器

后代选择器用于选择一个元素下的所有后代元素。例如，要选择带有类名为 “my-class” 的 div 元素中的段落元素，可以使用 .my-class p 选择器：

1
2
3
cssCopy Code.my-class p {
  font-weight: bold;
}
  • 子选择器

子选择器用于选择一个元素的直接子元素。例如，要选择带有类名为 “my-class” 的 div 元素的直接段落元素，可以使用 .my-class > p 选择器：

1
2
3
cssCopy Code.my-class > p {
  text-decoration: underline;
}
  • 属性选择器

属性选择器用于选择具有指定属性的元素。例如，要选择所有带有 title 属性的元素，可以使用 [title] 选择器：

1
2
3
cssCopy Code[title] {
  border: 1px solid blue;
}
  • 伪类选择器

伪类选择器用于在某些条件下样式化元素。例如，要选择所有处于鼠标悬停状态的超链接元素，可以使用 :hover 伪类选择器：

1
2
3
cssCopy Codea:hover {
  color: green;
}

总结

对于这两个b，还是要多想多练，不练习就容易忘。

在浏览器Ctrl+ f查看自己写的Xpath还有CSS选择器对不对，多练习以后提取数据就方便多了，当然排除网页做的很复杂的网站，说的就是某眼查。