Xpath 和 CSS的九大区别，附代码预防Xpath的坑

2021-03-23 20:02:37 阅读：285 来源： 互联网

标签：Xpath elements 元素九大 china div CSS

练习链接
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,elements,元素,九大,china,div,CSS
来源： https://blog.csdn.net/zzhangsiwei/article/details/115139340

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Xpath 和 CSS的九大区别，附代码预防Xpath的坑