css和xpath定位补充

更新日期: 2019-03-16阅读: 3.3k标签: 定位

XPath是一种在XML文档中定位元素的语言。因为html可以看作XML的一种实现, 所以Selenium用户可以使用这种强大的语言在Web应用中定位元素。xpath定位总结:

//:表示相对路径

* :标签名任意

/..:表示找上级

/ :表示找下级

@:标签属性定位

():text的值


xpath绝对定位:

1 以“/”开头的是绝对定位
2 /html/body/div[1] :div的下标从1开始
3 js后面写xpath定位:$X(‘/html/body/div[1]‘) :$X后面是xpath定位 
4 js后面写css的定位:$$("css") 或者 $("css")


xpath相对定位

1.以“//”开头的是相对定位
2."*”表示所有
3.//dl/dd[(last())] :定位到所有dd标签的最后一个
4.属性定位://div[@class=‘tab-con‘] 表示以div标签开头的,属性为class,属性值为tab-con的元素,其中属性可以为任意属性,例如://div/[@id=‘‘] 等等
5.not:取反向 //div[not(@class=‘tab-con‘)] 表示不包含div下的class=‘Ptable-tips‘的其他标签,
6.contains:包含函数 not(contains(@class,‘不包含的元素‘)) :不包含某个元素
7.normalize-space:去掉属性的值里面的空格 //div[normalize-space(@id)=‘guarantee‘] 例如: <id=‘ guarantee‘>
8.count():计算个数 //dl/*[conut(dd)=2] 表示所有dl标签下包含两个dd标签的元素
9.//*[name()=‘dd‘] 表示标签名称为dd的所有元素
10.starts-with:指定标签名字----定义标签中以某个字符开的的标签 例如://*[start-with(name(),‘i‘)] 表示标签名以i开头的元素,其中name()表示标签的名字
11.starts-with:指定标签属性 //*[starts-with(@tdata-tab,‘it‘)]
12.parent:找父标签 //div[@class=‘Ptable-item‘]/parent::*
13.child:找儿子标签 //div[@class=‘Ptable-item‘]/child::* 或者 //div[@class=‘Ptable-item‘]/*
14.following-sibling:弟弟标签 //dl[@class=‘clearfix‘][2]/following-sibling::*
15.preceding-sibling:哥哥标签 //dl[@class=‘clearfix‘][2]/preceding-sibling::*
16.descendant:后代标签 //div[@class=‘clearfix‘]/descendant::*
17.ancestor:祖先标签 //div[@class=‘clearfix‘]/ancestor::*
18.position():对位置计算 //dl/dd[not(contains(@class,‘Ptable-tips‘))][position() mod 2 = 0] 对定位的标签的下标取能被2整除的


css定位:

1. .表示:class
2. #表示:id
3. ,表示链接符:#test1,#test2
4. .login dl :表示标签属性为class=login 下的标签为dl的所有后代
5. .login>dl :表示标签属性class=login 下的标签为dl的儿子


css属性定位:

1.div[class=login_j] 和xpath的属性定为有点类似 //div[@class=‘login_1‘] 这是用xpath写的
2. * :a[herf*=jd] : a标签的herf属性包含字符jd的标签 a[title*=apple] title包含apple
3. ^ :a[title^="联想"] :a标签title属性以“联想”开头的





链接: https://fly63.com/article/detial/2405

css3中position:sticky

最近在写一个小程序,项目中遇到一个需求:页面滚动到tab切换菜单时,菜单fixed到页面顶部;使用小程序的onPageScroll事件,滚动到指定位置添加fixed样式;

苹果手机对网页上样式为position:fixed的弹窗支持不好的解决办法

在Web页面上,如果想模拟对话框效果,一般会给div元素添加position:fixed的样式来实现,然后给背景添加一个半透明的遮罩。你可以使用position:absolute样式来定义对话框,但是position:relative的元素出现的位置决定了对话框在页面中的绝对位置。

原生JS实现页面内定位

需求:点击跳转到页面指定位置.利用a标签的锚点跳转。1、利用a标签的锚点跳转,2、用js的scrollIntoView方法,3、获取id为test的元素距离父元素顶部的位置,即offsetTop, 改变父元素的scrollTop

html5获取地理位置和定位

H5地理位置定位功能:首先判断用户浏览器是否支持该功能,目前大多数现代浏览器均支持,获取位置信息需用户授权同意;showPosition()获取用户经度纬度;执行函数getLocation(),如果调用成功即可显示经度纬度,简单吧

浏览器获取手机经纬度位置

网址必须为域名,不能用ip直接访问,否则手机浏览器直接拒绝改请求。iphone的浏览器(包括微信扫码进入网站) ,亲测调用 http 的网站是不能获取到经纬度的,是苹果手机安全的考虑,如果使用https网站的话

CSS定位

改变元素在页面中的位置:页面中元素的默认定位方式,默认文档流,从上往下,从左往右;当元素设置浮动后,该元素脱离默认文档流,后面的元素会上前补位。当前元素会在当前行,向左或者向右排列

css绝对定位和相对定位、固定定位

绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素,基于绝对定位的元素不会占据空间。相对定位与绝对定位的区别在于它的参照点不是左上角的原点,而是该元素本身原先的起点位置。

CSS相对定位和固定定位

一般地,说起定位元素是指position不为static的元素,包括relative、absolute和fixed。前面已经详细介绍过absolute绝对定位的基础和应用,这篇博客介绍和梳理相对定位relative和固定定位fixed的相关知识

前端粘性定位事件

浏览器的世界里本没有粘性定位事件。然而,网页开发中,元素若使用了粘性定位 position:sticky ,常常还需要一个粘性定位事件,比如,外卖菜单。

css定位方式有哪几种?

复杂的网页布局都是通过各种网页元素灵活定位实现的,网页中的各种元素定位都有自己的特点。下面我们来看一下css的几种定位方式。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!