xpath定位和css定位的区别是什么-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

区别：1、XPATH中的直接子元素是使用“/”定义的，而在CSS上，它是使用“>”定义的。如果一个元素在另一个元素的内部（子元素或者孙元素），则它在XPATH中使用“//”定义，而在CSS中仅使用空格定义。

本教程操作环境：windows7系统、css3版、Dell G3电脑。

xpath常见的定位方法

在这里插入图片描述

xpath定位和css定位对比

实际项目中使用较多的是xpath定位和css定位。XPath是XML文档中查找结点的语法，换句话就是通过元素的路径来查找这个元素。xpath比较强大，而css选择器在性能上更优，运行速度更快，语法上更简洁。比较两种方法：

直接子元素

XPATH中的直接子元素是使用“/”定义的，而在CSS上，它是使用“>”定义的。

1 2	`XPATH：//div/input` `CSS: div>input`

后代元素

如果一个元素在另一个元素的内部（子元素或者孙元素），则它在XPATH中使用“//”定义，而在CSS中仅使用空格定义。

1 2	`XPATH：//div//input` `CSS: div input`

ID定位

XPATH中的元素id使用以下内容定义："[@id=‘kw’]"，而在CSS中使用："#kw"。

1 2	`XPATH：//input[@id='kw']` `CSS: input#kw`

【推荐教程：CSS视频教程】

CLASS定位

对于class属性，XPATH类似id，而CSS中用一个点表示。

1 2	`XPATH：//input[@class="s_ipt"]` `CSS: input.s_ipt`

弟弟元素：following-sibling 继兄弟

这对于表单元素非常有用，即页面中位于同一父节点内的下一个相邻元素。

1 2	`XPATH：//input[@class="s_ipt"]/following-sibling::a` `CSS：input[class="s_ipt"]+a`

哥哥元素：preceding-sibling 前兄弟

页面中位于同一父节点内的上一个相邻元素。

1 2	`XPATH：//a[@name='tj_baike']/preceding-sibling::a` `CSS：无法实现`

在这里插入图片描述

父节点元素

页面中位于一个节点的上级元素。

1 2	`XPATH:` `//input/parent` `CSS: 无法实现`

属性值

阅读剩余部分

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者