xpath获取标签的属性值_CSS & Xpath定位页面元素的规则

在写xpath、css之前，也许您需要知道为了能成功写好路径，需要什么工具？那么，看这里~

杜哈哈：如何使用Chrome、火狐浏览器+Try Xpath写xpath、css?​zhuanlan.zhihu.com

爬虫，爬什么？通常是通过 CSS或者Xpath 路径来定位到页面中我要爬取的内容。

路径怎么写？

一、CSS语法规则

1、基本语法

语法：Tag[attribute=‘value’]

示例： input[id='displayed-text']

PS: value中的字符要完全匹配页面属性值才能查找到

2、简写语法

• "#"代表id
• "." 代表class

上述语法 input[id='displayed-text'] 可以写成：

#displayed-text 或者 input#displayed-text（或者input.displayed-text）

需要注意的是：

• 后者能找得更快。
• 如果前者找到的元素有多个，就要加上input，主要目的是为了唯一定位。所以需要根据实际情况进行修改定位的范围，以实现唯一定位。
• 使用. 定位，可以不精确匹配（只需要字符串中包含.后边的字符就可以）。

3、通配符

• ^ 文本开始，规定语法中=后边的字符串是以？开始的
• $ 文本结束，规定语法中=后边的字符串是以？结束的
• * 文本包含的内容，规定语法中=后边的字符串包含什么

语法：Tag[attribute<special character通配符>=’value’]

示例：input[class^=‘name’] class的值以“name”开头,结果：所有以name开头的类

input[class$=‘name’]

input[class*=‘name’]

4、只通过标签名定位

• Tag>tag 标签>子标签
• Tag>#id名
• Tag>.class名

二、Xpath语法规则

如果元素的ID不唯一、动态变化、或name等属性值也不唯一，需要使用Xpath定位。

除非要想查找一组元素，其他情况下必须定位到唯一节点。

• 单斜杠“/”：要查找的元素是挨着上一级节点的子节点中的元素，中间不能跳级；
• 双斜杠“//”：查找下级任何子节点，或子节点中的子节点……，可以跳级。

1、基本语法

语法：//tag[@sttribute='value']

示例：//div[@id='navbar']//div

2、使用text() 创建Xpath

在一些标签中有text元素，可以通过 text 定位。

语法：tag[text()='value'] 其中tag是要定位到的 text 的标签

示例：//div[@class='homepage-hero']//a[text()='Enroll now']

PS：a是标签名，”Enroll text”是该标签中的text

text()方法是精准匹配

3、使用Contains创建Xpath

因为一些标签中的text可能存在很多空格（如“ Enroll now ”），使用上述text() 会因为精准匹配的原因定位不到元素，所以需要使用 contains 找包含value的定位

• 语法1：//tag[contains(@attribute,‘value’)]
• 语法2：//tag[contains(text(),‘value’)]
• 示例1：//a[contains(@class,‘abc123’)]
• 示例2：//tag[contains(text(),‘Enroll now’)]

注意，如果是属性，需要加@，如果是text()，则不需要。

4、starts-with查找元素

有时，某一属性的元素值中包含多个字符串，但是字符串的顺序不同。这时使用contains可能会搜索出多个定位，所以可以使用start-with规定值是以什么字符开始的。

语法：//tag[starts-with(@attribute,'value')]

示例：//a[starts-with(@class,'abc123')] 搜索以“abc123”开头的class

???可以尝试一下：//a[starts-with(text(),'abc123')]

5、查找父节点和评级节点

（1）查找父节点 ；（2）preceding sibling 目前节点向上查找同级节点 ；（3）following sibling 向下查找同级节点

本菜鸟观看网易云课堂 CSS&Xpath页面元素定位 学习并整理以上内容以便未来复习用T^T

本教程不做商用，其中的图片是网易云课堂里的，若有版权问题，请私聊哦~

如果能对在座各位有帮助也是好事一件啊~