這是一份 XPath 選擇器備忘單，其中列出了常用的 XPath 定位方法和 CSS 選擇器
XPath 即為 XML 路徑語言（XML Path Language），它是一種用來確定XML文檔中某部分位置的計算機語言。
類似路徑 語法識別和導航 XML 文檔中的節(jié)點在 Firefox 或 Chrome 控制臺中測試：
$x('/html/body')
$x('//h1')
$x('//h1')[0].innerText
$x('//a[text()="XPath"]')[0].click()
| Xpath | CSS |
|---|---|
//h1 | h1 |
//div//p | div p |
//ul/li | ul > li |
//ul/li/a | ul > li > a |
//div/* | div > * |
/ | :root |
/html/body | :root > body |
| Xpath | CSS |
|---|---|
//ul/li[1] | ul > li:first-child |
//ul/li[2] | ul > li:nth-child(2) |
//ul/li[last()] | ul > li:last-child |
//li[@id="id"][1] | li#id:first-child |
//a[1] | a:first-child |
//a[last()] | a:last-child |
| Xpath | CSS |
|---|---|
//*[@id="id"] | #id |
//*[@class="class"] | .class |
//input[@type="submit"] | input[type="submit"] |
//a[@id="abc"][@for="xyz"] | a#abc[for="xyz"] |
//a[@rel] | a[rel] |
//a[starts-with(@href, '/')] | a[href^='/'] |
//a[ends-with(@href, '.pdf')] | a[href$='pdf'] |
//a[contains(@href, '://')] | a[href*='://'] |
//a[contains(@rel, 'help')] | a[rel~='help'] |
| Xpath | CSS |
|---|---|
//h1/following-sibling::ul | h1 ~ ul |
//h1/following-sibling::ul[1] | h1 + ul |
//h1/following-sibling::[@id="id"] | h1 ~ #id |
| Xpath | CSS |
|---|---|
nodename | 選擇名稱為 nodename 的所有節(jié)點 |
/ | 從根節(jié)點中選擇 |
// | 從當前節(jié)點中選擇文檔中與選擇匹配的節(jié)點，無論它們在哪里 |
. | 選擇當前節(jié)點 |
.. | 選擇當前節(jié)點的父節(jié)點 |
@ | 選擇屬性 |
| Xpath | CSS |
|---|---|
//h1[not(@id)] | h1:not([id]) |
//button[text()="Submit"] | 文字匹配 |
//button[contains(text(),"Go")] | 文本包含（子字符串） |
//product[@price > 2.50] | 算術 |
//ul[*] | 有孩子 |
//ul[li] | 有孩子（具體） |
//a[@name or @href] | 或邏輯 |
//a | //div | 聯(lián)合（加入結果） |
| Xpath | CSS |
|---|---|
//ul/li/.. | $('ul > li').parent() |
//li/ancestor-or-self::section | $('li').closest('section') |
//a/@href | $('a').attr('href') |
//span/text() | $('span').text() |
| 運算符 | 說明 | 示例 |
|---|---|---|
| | 計算兩個節(jié)點集 | //book | //cd |
+ | 添加 | 6 + 4 |
- | 減法 | 6 - 4 |
* | 乘法 | 6 * 4 |
div | 分配 | 8 div 4 |
= | 平等的 | price=9.80 |
!= | 不相等 | price!=9.80 |
< | 小于 | price<9.80 |
<= | 小于或等于 | price<=9.80 |
> | 大于 | price>9.80 |
>= | 大于或等于 | price>=9.80 |
or | 或者 | price=9.80 or price=9.70 |
and | 和 | price>9.00 and price<9.90 |
mod | 模數(shù)（除法余數(shù)） | 5 mod 2 |
| - | - | - | - |
|---|---|---|---|
// | ul | / | a[@id='link'] |
| Axis | Step | Axis | Step |
| 前綴 | 例子 | 意思是 |
|---|---|---|
// | //hr[@class='edge'] | 任何地方 |
/ | /html/body/div | 根 |
./ | ./div/p | 相對的 |
| Axis(軸) | 例子 | 意思是 |
|---|---|---|
/ | //ul/li/a | 孩子 |
// | //[@id="list"]//a | 后裔 |
//div[true()]
//div[@class="head"]
//div[@class="head"][@id="top"]
僅當某些條件為真時才限制節(jié)點集。它們可以被鏈接起來。
# 比較
//a[@id = "xyz"]
//a[@id != "xyz"]
//a[@price > 25]
# 邏輯 (and/or)
//div[@id="head" and position()=2]
//div[(x and y) or not(z)]
# 在函數(shù)內部使用它們
//ul[count(li) > 2]
//ul[count(li[@class='hide']) > 0]
# 返回具有 `<li>` 子級的 `<ul>`
//ul[li]
您可以在謂詞中使用節(jié)點。
//a[1] # 第一個<a>
//a[last()] # 最后一個<a>
//ol/li[2] # 第二個<li>
//ol/li[position()=2] # 和上面一樣
//ol/li[position()>1] #:not(:first-child)
將 [] 與數(shù)字一起使用，或者使用 last() 或 position()。
a[1][@href='/']
a[@href='/'][1]
順序很重要，這兩個是不同的。
//section[.//h1[@id='hi']]
如果它有一個具有 id='hi' 的 <h1> 后代，則返回 <section>。
name() # //[starts-with(name(), 'h')]
text() # //button[text()="Submit"]
# //button/text()
lang(str)
namespace-uri()
count() # //table[count(tr)=1]
position() # //ol/li[position()=2]
contains() # font[contains(@class,"head")]
starts-with() # font[starts-with(@class,"head")]
ends-with() # font[ends-with(@class,"head")]
concat(x,y)
substring(str, start, len)
substring-before("01/02", "/") #=> 01
substring-after("01/02", "/") #=> 02
translate()
normalize-space()
string-length()
not(expr) # button[not(starts-with(text(),"Submit"))]
string()
number()
boolean()
//ul/li # ul > li
//ul/child::li # ul > li (same)
//ul/following-sibling::li # ul ~ li
//ul/descendant-or-self::li # ul li
//ul/ancestor-or-self::li # $('ul').closest('li')
// | ul | /child:: | li |
| Axis | Step | Axis | Step |
表達式的步驟由 / 分隔，通常用于選擇子節(jié)點。 這并不總是正確的：您可以使用 :: 指定不同的“軸”。
# 都一樣
//ul/li/a
//child::ul/child::li/child::a
child:: is the default axis. This makes //a/b/c work.
# 都一樣
# 這是因為 `child::li` 是真實的
//ul[li]
//ul[child::li]
# 都一樣
//ul[count(li) > 2]
//ul[count(child::li) > 2]
# 都一樣
//div//h4
//div/descendant-or-self::h4
// 是 descendant-or-self:: 軸的縮寫。
# 都一樣
//ul//[last()]
//ul/descendant-or-self::[last()]
| Axis | Abbrev | Notes |
|---|---|---|
ancestor | 選擇當前節(jié)點的所有祖先(父母、祖父母等) | |
ancestor-or-self | 選擇當前節(jié)點所有祖先(父、祖父等)和當前節(jié)點本身 | |
attribute | @ | @href 是 attribute::href 的縮寫 |
child | div 是 child::div 的縮寫 | |
descendant | 選擇當前節(jié)點的所有后代（子、孫等） | |
descendant-or-self | // | // 是 /descendant-or-self::node()/的縮寫 選擇當前節(jié)點和當前節(jié)點本身的所有后代（子、孫等） |
namespace | 選擇當前節(jié)點的所有命名空間節(jié)點 | |
self | . | . 是 self::node() 的縮寫，選擇當前節(jié)點 |
parent | .. | .. 是 parent::node() 的縮寫，選擇當前節(jié)點的父節(jié)點 |
following | 選擇文檔中當前節(jié)點結束標記之后的所有內容 | |
following-sibling | 選擇當前節(jié)點之后的所有兄弟節(jié)點 | |
preceding | 選擇文檔中出現(xiàn)在當前節(jié)點之前的所有節(jié)點，除了祖先、屬性節(jié)點和命名空間節(jié)點 | |
preceding-sibling | 選擇當前節(jié)點之前的所有兄弟節(jié)點 |
您還可以使用其他軸。
//a | //span
使用 | 連接兩個表達式。
//* # 所有元素
count(//*) # 計算所有元素
(//h1)[1]/text() # 第一個 h1 標題的文本
//li[span] # 找到一個 <li> 里面有一個 <span>
# ...擴展到 //li[child::span]
//ul/li/.. # 使用 .. 選擇父級
//section[h1[@id='section-name']]
查找直接包含 h1#section-name 的 <section>
//section[//h1[@id='section-name']]
查找包含 h1#section-name 的 <section>。
（與上面相同，但使用后代或自我而不是孩子）
./ancestor-or-self::[@class="box"]
像 jQuery 的 $().closest('.box') 一樣工作。
//item[@price > 2*@discount]
查找 <item> 并檢查其屬性