在线测试 CSS Selector 和使用 C# 查询

在线测试 CSS Selector

使用 CSS Selector Tester 按 CSS Selector 查找公共网页中的元素。输入 URL 和 article h2、.product-card 或 a[href] 等 Selector。该工具会显示匹配的 HTML 元素，并为同一查询生成 C# 代码。

1. 输入要检查的网页 URL。
2. 输入用于定位所需元素的 CSS Selector。
3. 单击 Find，检查匹配项，然后复制结果或生成的 C# 代码。

在 C# 中使用 CSS Selector 选择 HTML 元素

Aspose.HTML for .NET 通过 HTML DOM 提供标准 Selector 方法。此示例加载控件中显示的 URL，并使用 QuerySelectorAll() 将所有匹配项作为 NodeList 返回。更改控件中的 URL 或 Selector 后，此服务器端呈现的 C# 示例会自动更新。如果只需要第一个匹配元素，请使用 QuerySelector() 。

using System;
using Aspose.Html;
using Aspose.Html.Collections;
using Aspose.Html.Dom;

// Create an HTML document
string url = "https://www.aspose.com/";
using HTMLDocument document = new HTMLDocument(url);

// Select the matching HTML elements
NodeList elements = document.QuerySelectorAll("a");

foreach (Element element in elements)
{
    // Print the element markup
    Console.WriteLine(element.OuterHTML);
}

常用 CSS Selector 模式

CSS Selector 可以按名称、ID、class、属性、位置或 DOM 关系定位元素：

• p 匹配所有 <p> 元素。
• #summary 匹配 id 为 summary 的元素。
• .notice 匹配具有 notice class 的元素。
• a[href] 匹配具有 href 属性的链接。
• article > p 匹配 <article> 的直接子 <p> 元素。
• h1, h2 匹配任一表达式选择的元素。

CSS Selector 不提供按可见文本进行匹配的通用条件。如果查询需要检查文本内容、向上定位祖先元素或应用更复杂的谓词，请使用 XPath Tester 。

在 C# 中使用 CSS Selector API

1. 从本地 HTML 文件或 URL 创建 HTMLDocument 。
2. 定义用于匹配所需元素的 Selector。
3. 调用 QuerySelector() 获取一个元素，或调用 QuerySelectorAll() 获取所有匹配项。
4. 读取 TextContent、InnerHTML 或 OuterHTML 等属性，或更新选定的 DOM 元素。

仅选择元素不会修改源文档。如果修改了返回的元素并需要保留结果，请显式保存更新后的 HTMLDocument。

CSS Selector 文档和 API 参考

以下资源介绍 Selector 语法、DOM 导航和实际 C# 示例：

• 如何在 C# 中使用 CSS Selector 通过实际示例说明 QuerySelector() 和 QuerySelectorAll()。
• CSS Selector 类型和语法 介绍类型、class、ID、属性、组合器和伪类 Selector。
• 在 C# 中导航 HTML 比较直接 DOM 导航、CSS Selector 和 XPath 查询。

安装 Aspose.HTML for .NET

使用 .NET CLI 从 NuGet 安装 Aspose.HTML for .NET ：

dotnet add package Aspose.HTML

您也可以使用 NuGet 包管理器界面，或在包管理器控制台中运行 Install-Package Aspose.HTML。有关配置详情，请参阅 安装指南 ；如需不受评估版限制地测试 API，请申请 临时许可证 。

常见问题

1. 什么是 CSS Selector？

CSS Selector 是一种按标签名称、ID、class、属性、位置或与其他元素的关系来标识 HTML 元素的模式。浏览器和 DOM API 使用相同的 Selector 语法来应用样式和查找元素。

2. 方法 QuerySelector() 和 QuerySelectorAll() 有什么区别？

方法 QuerySelector() 返回第一个匹配元素，未找到时返回 null。方法 QuerySelectorAll() 返回包含所有匹配元素的 NodeList，没有匹配项时该列表为空。

3. CSS Selector 能否按文本查找元素？

标准 CSS Selector 不提供针对文本内容的通用条件。可以先选择候选元素，再在 C# 中检查 TextContent；如果表达式本身必须匹配文本，请使用 XPath。

4. 为什么 CSS Selector 没有返回匹配项？

请根据加载的 HTML 检查 Selector 语法、class 和 ID 拼写、属性值以及父子关系。空格选择后代元素，而 > 只选择直接子元素。