---
title: Comparison of CSS Selectors and XPath
slug: Web/XPath/Comparison_with_CSS_selectors
translation_of: Web/XPath/Comparison_with_CSS_selectors
original_slug: Web/CSS/CSS_Selectors/Comparison_with_XPath
---
<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>