CSSセレクタオンラインテスターとC#クエリ

CSSセレクタをオンラインでテスト

CSS Selector Testerを使用すると、CSSセレクタで公開Webページ上の要素を検索できます。URLと、article h2、.product-card、a[href]などのセレクタを入力してください。このツールは一致するHTML要素を表示し、同じクエリを実行するC#コードを生成します。

1. 確認するWebページのURLを入力します。
2. 必要な要素を特定するCSSセレクタを入力します。
3. Findをクリックし、一致する要素を確認して、結果または生成されたC#コードをコピーします。

C#でCSSセレクタを使用してHTML要素を選択

Aspose.HTML for .NET は、HTML DOMを通じて標準のセレクタメソッドを提供します。この例は、ウィジェットに表示されているURLを読み込み、 QuerySelectorAll() を使用して、すべての一致をNodeListとして返します。ウィジェットのURLまたはセレクタを変更すると、このサーバー側でレンダリングされる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セレクタのパターン

CSSセレクタは、名前、ID、クラス、属性、位置、DOM上の関係に基づいて要素を検索します。

• pはすべての<p>要素に一致します。
• #summaryはidがsummaryの要素に一致します。
• .noticeはnoticeクラスを持つ要素に一致します。
• a[href]はhref属性を持つリンクに一致します。
• article > pは<article>の直接の子である<p>要素に一致します。
• h1, h2はいずれかの式で選択される要素に一致します。

CSSセレクタには、表示テキストを照合するための汎用的な条件がありません。テキスト内容の確認、祖先要素への移動、より複雑な述語が必要な場合は、 XPath Tester を使用してください。

C#でCSS Selector APIを使用する手順

1. ローカルHTMLファイルまたはURLから HTMLDocument を作成します。
2. 必要な要素に一致するセレクタを定義します。
3. 1つの要素には QuerySelector() 、すべての一致には QuerySelectorAll() を呼び出します。
4. TextContent、InnerHTML、OuterHTMLなどのプロパティを読み取るか、選択したDOM要素を更新します。

要素を選択するだけではソース文書は変更されません。返された要素を変更して結果を保持する場合は、更新したHTMLDocumentを明示的に保存してください。

CSSセレクタのドキュメントとAPIリファレンス

セレクタ構文、DOMナビゲーション、実用的なC#の例については、次のリソースを参照してください。

• How to Use CSS Selectors in C# では、QuerySelector()とQuerySelectorAll()を実用例とともに説明しています。
• CSS Selector Types and Syntax では、型、クラス、ID、属性、結合子、疑似クラスの各セレクタを解説しています。
• HTML Navigation in C# では、DOMの直接走査、CSSセレクタ、XPathクエリを比較しています。

Aspose.HTML for .NET のインストール

.NET CLI を使用して、NuGet から Aspose.HTML for .NET をインストールします。

dotnet add package Aspose.HTML

NuGet パッケージ マネージャーの UI を使用するか、パッケージ マネージャー コンソールで Install-Package Aspose.HTML を実行することもできます。セットアップの詳細は インストール ガイド を参照してください。評価制限なしで API を試すには、 一時ライセンス を申請できます。

FAQ

1. CSSセレクタとは何ですか？

CSSセレクタは、タグ名、ID、クラス、属性、位置、または他の要素との関係に基づいてHTML要素を識別するパターンです。ブラウザーとDOM APIは、スタイルの適用と要素の検索に同じセレクタ構文を使用します。

2. メソッドQuerySelector()とQuerySelectorAll()の違いは何ですか？

メソッドQuerySelector()は最初に一致する要素を返し、一致しない場合はnullを返します。QuerySelectorAll()は一致するすべての要素を含むNodeListを返し、一致しない場合は空のリストになります。

3. CSSセレクタでテキストを基に要素を検索できますか？

標準のCSSセレクタには、テキスト内容を指定する汎用的な条件がありません。候補要素を選択してC#でTextContentを確認するか、式自体でテキストを照合する必要がある場合はXPathを使用します。

4. CSSセレクタが何も返さないのはなぜですか？

読み込んだHTMLに対して、セレクタ構文、クラス名とID、属性値、親子関係を確認してください。空白は子孫を選択し、>は直接の子のみを選択します。