--- 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>