常用xpath选择器和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元素 |