绝对路径选择
从根节点开始的，到某个节点，每层都依次写下来，每层之间用 / 分隔的表达式，就是某元素的 绝对路径
- Xpath :
/html/body/div - CSS :
html>body>div
相对路径选择
选择所有div元素里面的子节点p
- Xpath :
//div//p - CSS :
- 选择直接子元素（父元素是div的p元素）
div>p - 选择后代子元素（div元素里的所有p元素）
div p
- 选择直接子元素（父元素是div的p元素）
通配符*
选择所有div节点的所有直接子节点
- Xpath :
//div/* - CSS :
div>*
根据属性选择
选择所有class为a的b元素
- Xpath :
//b[@class='a'] - CSS :
.a
选择style属性为color的所有元素
- Xpath :
//*[@style='color'] - CSS :
[style='color']
选择a属性包含b的所有元素
- Xpath :
//*[contains(@a,'b')] - CSS :
[a*='b']
选择a属性开头为b的所有元素
- Xpath :
//*[starts-with(@a,'b')] - CSS :
[a^='b']
选择a属性结尾为b的所有元素(xpath2.0语法，浏览器不支持)
- Xpath :
//*[ends-with(@a,'b')] - CSS :
[a$='b']
选择a属性包含a1，b属性开头b1，c属性结尾为c1的d元素
- CSS :
d[a*='a1'][b^='b1'][c$='c1']
按次序选择元素
选择父元素为div中的p类型第2个子元素
- Xpath :
//div/p[2] - CSS :
div p:nth-child(2)
选择父元素为div的第2个子元素
- Xpath :
//div/*[2] - CSS :
div :nth-child(2)
选取p类型倒数第2个子元素
- Xpath :
//p[last()-1] - CSS :
p:nth-last-child(2)
选择a元素的第n个p子节点
- CSS :
a p:nth-of-type(n)
选择a元素的倒数第n个p子节点
- CSS :
a p:nth-last-of-type(n)
选择a元素的偶数子节点
- CSS :
a p:nth-of-type(n)
选择a元素的奇数子节点
- CSS :
a :nth-child(even)
选择a元素的p类型的偶数子节点
- CSS :
a p:nth-of-type(even)
选择a元素的p类型的奇数子节点
- CSS :
a p:nth-of-type(even)
按范围选择元素
选取option类型第1到2个子元素
- Xpath :
//option[position()<=2]
选择class属性为a的前3个子元素
- Xpath :
//*[@class='a']/*[position()<=3]
选择class属性为a的后3个子元素
- Xpath :
//*[@class='a']/*[position()>=last()-2]
组选择
选所有class为a的元素，和所有id为b的元素
- Xpath :
//*[@class='a'] | //*[@id='b'] - CSS :
.a , #b
根据子节点选择父节点
父节点没有特征，但子节点有特征时，可通过子节点定位父节点
查找后2代元素包含a元素的节点
- Xpath :
//a/../..
兄弟节点选择
选择 class 为 a 的元素的所有后续兄弟节点
- Xpath :
//*[@class='a']/following-sibling::* - CSS :
.a ~ *
选择 class 为 a 的元素的所有前置兄弟节点
- Xpath :
//*[@class='a']/preceding-sibling::* - CSS : 不支持