aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/xpath/comparison_with_css_selectors/index.html
blob: c196e077e621365868124897b048ce46d6e02d2f (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
---
title: Comparison of CSS Selectors and XPath
slug: Web/CSS/CSS_Selectors/Comparison_with_XPath
translation_of: Web/XPath/Comparison_with_CSS_selectors
---
<div>{{CSSRef("Selectors")}}{{QuickLinksWithSubpages("/en-US/docs/Web/XPath")}}{{Draft}}</div>

<p class="summary">本文旨在记录CSS选择器和XPath之间的区别,以便Web开发人员能够更好地为正确的工作选择合适的工具。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col"><a href="/en-US/docs/Web/XPath">XPath feature</a></th>
   <th scope="col"><a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS equivalent</a></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="/en-US/docs/Web/XPath/Axes/ancestor"><code>ancestor</code></a>, <a href="/en-US/docs/Web/XPath/Axes/parent"><code>parent</code></a> or <a href="/en-US/docs/Web/XPath/Axes/preceding-sibling"><code>preceding-sibling</code></a> axis</td>
   <td>{{CSSxRef(":has",":has()")}} selector {{experimental_inline}}</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/XPath/Axes/ancestor"><code>attribute</code></a> axis</td>
   <td><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selectors</a></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/XPath/Axes/child"><code>child</code></a> axis</td>
   <td><a href="/en-US/docs/Web/CSS/Child_selectors">Child combinator</a></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/XPath/Axes/descendant"><code>descendant</code></a> axis</td>
   <td><a href="/en-US/docs/Web/CSS/Descendant_selectors">Descendant combinator</a></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/XPath/Axes/following-sibling"><code>following-sibling</code></a> axis</td>
   <td><a href="/en-US/docs/Web/CSS/General_sibling_selectors">General sibling combinator</a> or <a href="/en-US/docs/Web/CSS/Adjacent_sibling_selectors">adjacent sibling combinator</a></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/XPath/Axes/self"><code>self</code></a> axis</td>
   <td>{{CSSxRef(":scope")}} or {{CSSxRef(":host")}} selector</td>
  </tr>
 </tbody>
</table>