前提

使用火狐浏览器，并安装了对应的插件后进行下面的练习

1. xpath练习

以搜狗搜索为例
https://www.sogou.com/

1.1 nodename

nodename表示根节点，也就是说在抓取任何一个节点时都要从根节点开始找

1.2 /

从根节点选取

1.3 //

从匹配选择的当前节点选择文档中的节点，而不考虑他们的位置

1.4 .

选取当前节点

1.5 …

选取当前节点的父节点

1.6 @

选取属性

1.7 /bookstore/book[1]

选取属于bookstore子元素的第一个book元素

1.8 /bookstore/book[last()]

选取属于bookstore子元素的最后一个book元素

1.9 /bookstore/book[last()-1]

选取属于bookstore子元素的倒数第二个book元素

1.10 /bookstore/book[position()❤️]

选取最前面的两个属于bookstore元素的子元素的book元素

1.11 //title[@lang]

选取所有拥有名为lang的属性的title元素

1.12 //title[@lang=“eng”]

选取所有title元素，且这些元素拥有值为eng的lang属性

1.13 *

匹配任何元素节点

1.14 @*

匹配任何属性节点

1.15 node()

匹配任何类型的节点

1.16 /bookstore/*

选取bookstore元素的所有子元素

1.17 //*

选取文档中的所有元素

1.18 html/node()/meta/@*

选择html下面任意节点下的meta节点的所有属性

1.19 //title[@*]

选取所有带属性的title元素

1.20 //book/title | //book/price

选取book元素的所有title和price元素

1.21 //title | //price

选取文档中的所有title和price元素

1.22 /bookstore/book/title | //price

选取属于bookstore元素的book元素的所有title元素，以及文档中所有的price元素

1.23 //*[text()=“x’x’x”]

全部//title/text() 本内容是xxx的元素

1.24 //*[starts-with(@attribute,“xxx”)]

属性以xxx开头的元素

1.25 //*[contains(@attribute,“xxxxx”)]

属性中含有xxx的元素

1.26 //*[@attribute1=value1 and @attribute2=value2]

同时有两个属性值的元素

2. css选择器练习

2.1 通过伪类名、id、标签名定位

2.2 通过元素之前嵌套关系

2.3 通过属性

2.4 通过父子关系