这是一份 XPath 选择器备忘单，其中列出了常用的 XPath 定位方法和 CSS 选择器
XPath 即为 XML 路径语言（XML Path Language），它是一种用来确定XML文档中某部分位置的计算机语言。
+在 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 | +
|---|---|
//ul/li/.. |
+ $('ul > li').parent() | +
//li/ancestor-or-self::section |
+ $('li').closest('section') | +
//a/@href |
+ $('a').attr('href') | +
//span/text() |
+ $('span').text() | +
| 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` | +
| - | +- | +- | +- | +
|---|---|---|---|
// |
+ 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"]
+仅当某些条件为真时才限制节点集。它们可以被链接起来。
+# 比较
+//a[@id = "xyz"]
+//a[@id != "xyz"]
+//a[@price > 25]
+# 逻辑 (and/or)
+//div[@id="head" and position()=2]
+//div[(x and y) or not(z)]
+# 在函数内部使用它们
+//ul[count(li) > 2]
+//ul[count(li[@class='hide']) > 0]
+# 返回具有 `<li>` 子级的 `<ul>`
+//ul[li]
+您可以在谓词中使用节点。
+//a[1] # 第一个<a>
+//a[last()] # 最后一个<a>
+//ol/li[2] # 第二个<li>
+//ol/li[position()=2] # 和上面一样
+//ol/li[position()>1] #:not(:first-child)
+将 [] 与数字一起使用，或者使用 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 | +
表达式的步骤由 / 分隔，通常用于选择子节点。 这并不总是正确的：您可以使用 :: 指定不同的“轴”。
# 都一样
+//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 |
+ + | + |
ancestor-or-self |
+ + | + |
attribute |
+ @ |
+ @href 是 attribute::href 的缩写 |
+
child |
+ + | div 是 child::div 的缩写 |
+
descendant |
+ + | + |
descendant-or-self |
+ // |
+ // 是 /descendant-or-self::node()/的缩写 |
+
namespace |
+ + | + |
self |
+ . |
+ . 是 self::node() 的缩写 |
+
parent |
+ .. |
+ .. 是 parent::node() 的缩写 |
+
following |
+ + | + |
following-sibling |
+ + | + |
preceding |
+ + | + |
preceding-sibling |
+ + | + |
您还可以使用其他轴。
+//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> 并检查其属性
diff --git a/style/style.css b/style/style.css index d7d41ba1..fb718173 100644 --- a/style/style.css +++ b/style/style.css @@ -80,6 +80,10 @@ table thead { display: none; border-bottom: solid 1px rgba(85,102,119,0.3); } +table td:first-child>code { + --text-opacity: 1; + color: rgb(5 150 105/var(--text-opacity)); +} table.show-header thead { display: table-header-group;