Xpath 和 CSS的九大区别，附代码预防Xpath的坑
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Xpath 和 CSS的九大区别，附代码预防Xpath的坑，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3282字，纯文字阅读大概需要5分钟。
内容图文
练习链接
http://cdn1.python3.vip/files/selenium/sample1.html
示例视频和讲解
https://www.bilibili.com/video/av64421994/?p=31&spm_id_from=pageDriver
原文Xpath文档
http://www.python3.vip/tut/auto/selenium/xpath_1/
以下是个人手抄整理点
1.xpath 绝对路径里
Xpath 里/html 表示根节点
/html/body/div 等价于 css html>body>div
2.Xpath可以根据属性来选择元素
[@属性名=‘属性值’]；注意前面有@，属性值必须用单引号或者双引号，
比如选择//*[@id=‘west’] (css表达式 *[id=‘west’])
3.xpath里class名有多个
//p[@class=“capital huge-city”] （在css里 可以单个表达，如 .capital）
//[@multiple]
4.Xpath和CSS以什么开头，包含什么，以什么结尾的不同
CSS属性值包含某个字符窜的元素，可以用css这种表达式选择a[href=“miitbeian”];Xpath 表达式 //[contains(@href,‘miitbeian’)]
要选择a节点，里面的href属性以http开头CSS里 a[href^=“http”];Xpath 表达式//[starts-with(@href,‘http’)],//[starts-with(@class,‘m’)]
要选择a节点，以gov.cn结尾 a[href$=‘gov.cn’];Xpath2.0 表达式 //[ends-with(@href,‘cn’)] Xpath1.0不支持，Chrome浏览器会报错
5.p29，Xpath里按次序选择
//p[2]选择的是 p类型第2个的子元素 ， 不是第2个子元素，并且是p类型，（相当于CSS p:nth-of-type(2)）
看链接“http://cdn1.python3.vip/files/selenium/test1.html”里Ctrl+F 搜索下，比较区别就知道了
//div//p[2] (等价于CSS div p:nth-of-type(2) )
假如我们就是想选择父元素为div的第2个子元素，不管是什么类型//div/[2] (等价于CSS div > :nth-child(2))
倒数第1个用Xpath //p[last()] 代表p类型的最后一个(等价于CSS p:nth-last-of-type(1))，倒数第2个Xpath用 //p[last()-1],倒数第三 -2
6.Xpath的范围选择
选取option类型第1到2个子元素 //option[position()<=2]或者//option[position()??],选取前2个元素
选取后2个，//[@class=‘multi_choice’]//option[position()>=last()-1]
7.Xpath 组合选择，用|分开
比如要选择所有的option元素和所有的h4元素，可以使用 //option|//h4（等价于CSS option,h4）
8.Xpath可以选择父节点，这是CSS做不到
比如//div[@id=“china”]/…是选取这个元素//div[@id=“china”]的父节点，继续父节点就再加/…,/div[@id=“china”]/…/…
9.Xpath兄弟节点选择
following-sibling::,如选择后面的所有兄弟节点
//[@class=‘single_choice’]/following-sibling::(等同于.single_choice~)
假如要选择后面的select类，直接加//[@class=‘single_choice’]/following-sibling::select，在前的用preceding-sibling 如//*[@class=‘multi_choice’]/preceding-sibling::*前面的所有兄弟节点
部分代码
from selenium import webdriver
wd=webdriver.Chrome()
url='http://cdn1.python3.vip/files/selenium/test1.html'
wd.get(url)
eles=wd.find_elements_by_xpath('/html/body/div')
for ele in eles:#当成多个小的元素处理
print('--'*30)
print(ele.text)
‘’’
eles=wd.find_element_by_xpath('/html/body/div')
print(eles.text) #把它当成单个大的元素
‘’’
# Xpath的坑
# CSS #china>p Xpath //div[@id='china']/p
china=wd.find_element_by_id('china')
# elements=china.find_elements_by_xpath('.//p')#从上面的对象china里找元素，一定要加.代表从返回的对象内部查找，如果不加点是从全部网页里找，不加点相当于从webdriver里查找
# for ele in elements:
# print('-'*30)
# print(ele.get_attribute('outerHTML'))
#验证一下，CSS没有这个问题
elements=china.find_elements_by_css_selector('p')#从上面的对象china里找元素，一定要加.代表从返回的对象内部查找，如果不加点是从全部网页里找，不加点相当于从webdriver里查找
# elements=china.find_elements_by_tag_name('p')
for ele in elements:
print('-'*30)
print(ele.get_attribute('outerHTML'))
wd.quit()
内容总结
以上是互联网集市为您收集整理的Xpath 和 CSS的九大区别，附代码预防Xpath的坑全部内容，希望文章能够帮你解决Xpath 和 CSS的九大区别，附代码预防Xpath的坑所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。