首页 > 其他分享 >常用xpath选择器和css选择器总结

常用xpath选择器和css选择器总结

时间:2023-12-22 17:01:23浏览次数:21  
标签:xpath span class 元素 选取 article div 选择器 css

xpath选择器

表达式说明
article 选取所有article元素的所有子节点
/article 选取根元素article
article/a 选取所有属于article的子元素的a元素
//div 选取所有div子元素(不论出现在文档任何地方)
article//div 选取所有属于article元素的后代的div元素,不管它出现在article之下的任何位置
//@class 选取所有名为class的属性
/article/div[1] 选取属于article子元素的第一个div元素
/article/div[last()] 选取属于article子元素的最后一个div元素
/article/div[last()-1] 选取属于article子元素的倒数第二个div元素
//div[@lang] 选取所有拥有lang属性的div元素
//div[@lang='eng'] 选取所有lang属性为eng的div元素
/div/* 选取属于div元素的所有子节点
//* 选取所有元素
//div[@*] 选取所有带(任意)属性的div元素
/div/a | //div/p 选取所有div元素的a和p元素
//span | //ul 选取文档中的span和ul元素
article/div/p | //span 选取所有属于article元素的div元素的p元素以及文档中的所有span元素
//div[@id='1']/h1/text() 获取id为1的div标签下的h1标签里的内容
//span[not(@class)] 选择不包含class属性的span节点
//span[not(@class) and not(@id)] 选择不包含class和id属性的span节点
//span[not(contains(@class,'expire'))] 选择不包含class="expire"的span
//span[contains(@class,'expire')] 选择包含class="expire"的span
//h2[contains(text(),'Activated')] 选择标签内容里包含Activated的h2标签
//div[not(contains(text(),'activated'))] 选择标签内容中不包含activated的div标签

XPATH如何选择不包含某一个属性的节点

我们知道选择包含某一特定属性的节点,可以使用例如//tbody/tr[@class]来选择。那么不含某属性的节点如何用xpath取得呢?

这里可以用到not。例如排除一个属性的节点可以使用//tbody/tr[not(@class)]来写,排除一个或者两个属性可以使用//tbody/tr[not(@class or @id)]来选择。

css 选择器

表达式说明
* 选择所有节点
# container 选择id为container的节点
.container 选取所有class 包含container的节点
li a 选取所有li下的所有a节点 (子节点)
ul + p 选择ul后面的第一个p元素(兄弟节点)
div#container > ul 选取id为container的div的第一个ul子元素
ul ~ p 选取与ul相邻的所有p元素
a[title] 选取所有有title属性的a元素
a[href="a.com"] 选取所有href属性为a.com值的a元素
a[href*="a"] 选取所有href属性包含a的a元素
a[href^="http"] 选取所有href属性值以http开头的a元素
a[href$=".jpg"] 选取所有href属性值以.jpg结尾的a元素
inupt[type=radio]:checked 选取状态为选中的radio元素
div:not(#container) 选取所有id不为container的div元素
li:nth-child(3) 选取第三个li元素
tr:nth-child(2n) 第偶数个tr元素

标签:xpath,span,class,元素,选取,article,div,选择器,css
From: https://www.cnblogs.com/shanhubei/p/17921982.html

相关文章

  • 03--css重点回顾
    CSS层叠样式表一css简介什么是css?层叠样式表命名规则:使用字母、数字或下划线和减号构成,不要以数字开头格式:选择器{属性:值;属性:值;属性:值;....}其中选择器也叫选择符CSS中注释/*...*/二如何使用css样式即html中嵌入css的方式1.内联方式(行内样式......
  • CSS设置一个梯形
    1、图形2、代码<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><style> .d{ width:0px; height:100px; border-left:25pxsolid; border-top:25pxsolidtransparent; border-bottom:2......
  • css中的::after和::before
    先来看一个::before和::after的例子,给一个元素的前后再不添加新的元素的时候增加内容:<viewclass="info-before">测试before和after</view>.info-before{font-weight:bold;margin:30px;}.info-before::before{content:"添加在::before";......
  • 使用css绘制箭头
    使用css也能直接写出箭头符号,这样不用都使用图片能减少打包的大小。下面是一些常用箭头的css写法://向上的箭头<viewclass="button-up"></view>//css的内容.button-up{position:relative;padding:5px;margin:10pxauto;background:#000;......
  • 使用js和css实现选项卡切换
    HTML<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><linkrel="stylesheet"hre......
  • css中的定位方式
    css中默认的定位方式为static,如果不是static了,那么就说明这个元素被定位了,定位方式有很多种,简单介绍一下相对定位相对于自己原来的位置进行比较,仍然占据文档流的位置.parent{position:relative;}.child{position:relative;/*默认是static,将其改为relative*/to......
  • 纯css展示loading加载动画
    https://uiverse.io/barisdogansutcu/light-rat-32<svgviewBox="25255050"><circler="20"cy="50"cx="50"></circle></svg>svg{width:3.25em;transform-origin:center;animation:rot......
  • 可视化学习:CSS transform与仿射变换
    引言在几年前,我就在一些博客中看到关于CSS中transform的分析,讲到它与线性代数中矩阵的关系,但当时由于使用transform比较少,再加上我毕竟是个数学学渣,对数学有点畏难心理,就有点看不下去,所以只是随便扫了两眼,就没有再继续了解了。现在在学习可视化,又遇到了这个点,又说到这是可视化的......
  • css垂直居中
    word-wrap:break-word;/*英文的时候需要加上这句,自动换行*//*自测了这句话没啥用*/writing-mode:vertical-rl;/*从左向右从右向左是writing-mode:vertical-rl;*/writing-mode:tb-rl;/*IE浏览器的从左向右从右向左是writing-mode:tb-rl;*/text-align:......
  • css文本换行设置
    文本换行设置word-wrapword-wrap:normal|break-word;normal:默认值,当一行剩余空间无法容纳下一个字(英文是指单词)时,会换行break-word:针对英文的文本,这个值可以让一个单词拆分开来换行。word-breakword-break:normal|break-all|keep-allnormal:不拆分单词......