<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Sample Page</title></head><body><div><div><div><p>This is a paragraph inside a nested div.</p></div></div></div><divclass="example">This is a div with class "example".</div><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul><ahref="#">Click me</a><divid="example_id">This is a div with ID "example_id".</div></body></html>
1. 绝对路径
XPath 表达式:/html/body/div[1]/div[2]/div[3]
解释:选择 HTML 文档中的第一个 div,其中的第二个 div,然后其中的第三个 div。
2. 相对路径
XPath 表达式://div[@class="example"]
解释:选择所有带有类名为 “example” 的 div 元素。
3. 文本内容
XPath 表达式://a[text()="Click me"]
解释:选择所有文本内容为 “Click me” 的 a 元素。
4. 属性
XPath 表达式://*[@id="example_id"]
解释:选择所有具有 ID 属性值为 “example_id” 的元素。
5. 索引
XPath 表达式://ul/li[3]
解释:选择所有 ul 下的第三个 li 元素
二、CSS选择器
HTML
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><style>/* 添加一些样式以便在 CSS 选择器中使用 */.example{color: blue;}#example_id{background-color: yellow;}</style><title>CSS Selector Example</title></head><body><div>这是一个 div 元素</div><!-- 使用类名为 example 的 div 元素 --><divclass="example">这是一个具有类名 example 的 div 元素</div><!-- 使用 ID 为 example_id 的 div 元素 --><divid="example_id">这是一个具有 ID 为 example_id 的 div 元素</div><!-- 使用 name 为 example_name 的 input 元素 --><inputtype="text"name="example_name"placeholder="输入框"><!-- 使用类名为 example、name 为 example_name 的 div 元素 --><divclass="example"name="example_name">这是一个具有类名 example 和 name 为 example_name 的 div 元素</div></body></html>