CSS、Xpath选择器元素定位

原创 2018年04月17日 16:05:59
CSS ID选择器:ID在html规范里必须是唯一的,但id也会出现不唯一,或者id是动态变化的

如果id是唯一且基本固定,可以用ID来

语法 :tag[attribute='value']   注释:标签名[属性名='属性值']

            #--id属性

            .--class属性

html标签名选择器、id选择气、class选择器

eg: a[id='login-btn']

a#login-btn

#login-btn

CSS 类选择器 或多个class时追加类选择器

语法: tag[attribut='value']    标签名[属性='属性值']


span.icon-shopping-cart.js-endcart 注:class有多个属性时,可以不断追加属性,不能带空格第一个classicon-shopping-cart,不够,同级可以在添加一个class,顺序无所谓,谁在前谁在后都一样

CSS选择器-通配符定位元素  好处可以匹配一批元素或者模糊查

1、^-->代表以什么文本开始

2、$-->代表已什么文本结尾

3、*-->代表包含什么文本   注:xpath contains()

语法:tag[attribute<special character>='value']  注:标签名[属性名<通配符>='属性值'],尖括号在定位中不要,这里写出是为了区分

eg:div[class^='search']  注:查找div标签中以search开头的class属性的元素


除了class和id还可以用其他属性

action-type="my_menu"


CSS选择器-查找子节点 只通过标签逐级往下找,左尖括号是CSS对象选择符

尖括号左右两边可以是标签,可以是属性

语法1:标签名>标签名……

语法2:标签名>类/id/其他属性

语法3:类/id/其他属性>标签名



XPATH

Xpath元素定位原因如下:

  • 元素的id不唯一,或者是动态的
  • 或者其他属性eg:name、link、title等等属性值也不唯一
  • 此时,我们就需要考虑Xpath来查找元素了,然后在对元素执行其他操作

常用语法://tag[@attribute='value']

"/"和"//"的区别:

  • "/":元素是上一级节点的子节点中的一个,不能跳级,即:只能儿子,父与子
  • "//":下级任何子节点或者任何嵌套子节点中的任意,可以跳级,即后代均可,父与后代(父与子是其中一类)
  • 路径里面尽量不要用*(任意匹配),尽可能选上标签,速度快,
  • "/"和"//"可以任意搭配混合使用,

绝对路径:Xpath绝对路径使用"/"单右斜杠来表示(一般不用相当路径,万一路径中层次路径结构变了(而且极易变),或者标签变了就不能用了)


相对路径:Xpath相对路径使用"//"双右斜杠来表示,结构路径简洁(短小精悍)


Xpath高级Xpath路径创建

1、使用//、/结合使用,能用在开头也能用在中间

2、使用text()函数文本定位://a[text()='值'](完全匹配,空格也要匹配上),模糊可以使用contains()


3、使用contains:语法 //tag[contains(@attribute,'value')]

eg: //[contains(text(),'忘记密码')] 注(text()不加@)

    //[contains(@title,'忘记密码')]

    //input[contains(@class,'username') and contains(@id,'username1')]

4、使用start-with() //tag[start-with(@属性,'属性值')]

--------------------------------------------------------------------------------------

如何查找父节点和平级节点(上级或其他节点没有过多属性,没法直接定位到,就可通过父级或平级来)

找父级节点语法:Xpath-to-some-element//parent::tag 红色为不变

找前面平级级节点语法:Xpath-to-some-element//preceding-sibling::tag 红色为不变

找后面平级级节点语法:Xpath-to-some-element//following-sibling::tag 红色为不变


查找速度:id>name>css>xpath

20160925python

本地图片的爬虫
  • darksheng
  • darksheng
  • 2016-09-25 19:59:32
  • 357

Selenium中CSS选择器与Xpath根据页面结构定位元素比较

CSS选择器和Xpath都能通过页面结构对位元素,以下为采用两种方式定位相同元素的例子: abc abc www.bai...
  • li6wen9zhi
  • li6wen9zhi
  • 2016-06-14 10:05:41
  • 5397

Xpath和CSS选择器的使用详解

Xpath与CSS选择器在爬虫中非常常见,下列我将描述一下它们的使用详情安装Xpath和CSS选择器Windows平台 pip install lxmlUbuntu平台$ sudo apt-get i...
  • lanhaixuanvv
  • lanhaixuanvv
  • 2017-11-17 22:35:37
  • 820

浏览器检查selenium的xpath、css定位,助你轻松搞定元素定位

学习selenium,定位是第一入门课,在学习xpath、css定位时,经常会出现写错或者定位不到等问题,直接在浏览器复制吧,定位的locator太长又不友好,怎么解决呢?其实浏览器就可以帮我们解决,...
  • ouyanggengcheng
  • ouyanggengcheng
  • 2017-08-15 18:03:36
  • 657

【选择器小结】正则表达式、XPath选择器、CSS选择器小结和使用场景

小结: 分析目标数据,情况如下: (1)特征明显:正则表达式 (2)类、id唯一性强:选择css (3)层次结构明显:选择xpath...
  • qq_32616843
  • qq_32616843
  • 2017-11-29 21:40:18
  • 577

XPath和CSS 3的解析器比较

最近,我做了很多工作来实现一个同时支持XPath和CSS 3的解析器,令我惊讶的是:它们俩在某些方面上非常相似,而在另一些方面上又完全不同.不同的地方有,CSS是用来配合HTML工作的,可以使用#id...
  • qq_30175203
  • qq_30175203
  • 2016-05-24 17:06:27
  • 2616

xpath&css选择器

XPATH&CSS选择器
  • P_LarT
  • P_LarT
  • 2017-08-24 13:09:33
  • 178

Selenium WebDriver中使用By.Xpath快速定位页面元素

  • 2013年07月17日 14:50
  • 161KB
  • 下载

jquery css和xpath选择器

jQuery的选择器是CSS 1-3,XPath的结合物。jQuery提取这二种查询语言最好的部分,融合后创造出了最终的jQuery表达式查询语言。如果你了解CSS(绝大部分WEB开发者都用到的),那...
  • aiouwen521
  • aiouwen521
  • 2010-11-30 15:26:00
  • 5538

元素定位---使用 CSS 选择器定位元素

1.使用绝对路径来定位元素 CSS 绝对路径指的是在 DOM 结构中具体的位置。下面一个例子,使用绝对路径来定位用户 名输入字段。在使用绝对路径的时候,每个元素之间要有一个空格。 WebEl...
  • adonis_lu37
  • adonis_lu37
  • 2017-08-09 15:28:49
  • 284
收藏助手
不良信息举报
您举报文章:CSS、Xpath选择器元素定位
举报原因:
原因补充:

(最多只允许输入30个字)