XPath vs CSS选择器 - CSS

简介

XPath和CSS选择器是两种常用于在HTML文档中查找元素的方式。XPath通常用于XML文档，但也可以用于HTML文档。CSS选择器用于HTML文档，但也可以用于XML文档。这两种选择器都可以用于定位特定的HTML元素，并且很多时候使用它们可以避免使用JavaScript来操作DOM元素。

CSS选择器

CSS选择器是一种非常直观的方式来选择HTML元素。它们可以选择元素的类型、类、ID、属性等。下面是一些常用的CSS选择器：

• 类选择器：.class
• ID选择器：#id
• 元素选择器：element
• 属性选择器：[attribute=value]
• 子元素选择器：parent > child
• 后代选择器：ancestor descendant
• 同级元素选择器：element ~ sibling

使用CSS选择器可以定位特定的HTML元素，例如：

ul.nav > li.active
#content img[src^="http"], a[href*="example.com"]
input[type="radio"]:checked + label

XPath

XPath是一种基于XML结构的查询语言。它允许通过路径表达式来定位XML文档中的元素。在HTML文档中，XPath通常用于选择多个元素或者使用特殊的选择器。

XPath选择器包括：

• 路径表达式：/和//
• 基本筛选器：element、@attribute和text()
• 比较符和属性筛选器：=,!=,<,<=,>,>=、and、or和not
• 位置路径表达式：[index]
• 轴表达式：ancestor、parent、preceding-sibling、following-sibling、child、following和preceding

使用XPath可以定位特定的HTML元素，例如：

//div[@class='class-name']
//input[@type='text'][@name='username']
//ul/li[position() mod 2 = 1]

总结

CSS选择器和XPath都是强大的工具，它们可以用于定位HTML元素并执行DOM操作。当需要定位一个元素时，使用CSS选择器比XPath更直观一些。但当需要使用复杂的筛选逻辑或选择大量元素时，XPath更加高效。在实际工作中，程序员需要根据具体场景选择适合的工具。