CSS Selector Online dan Kueri C#

Uji Selektor CSS Secara Online

Gunakan CSS Selector Tester untuk menemukan elemen pada halaman web publik berdasarkan selektor CSS. Masukkan URL dan selektor seperti article h2, .product-card, atau a[href]. Alat ini menampilkan elemen HTML yang cocok dan membuat kode C# untuk kueri yang sama.

1. Masukkan URL halaman web yang ingin Anda periksa.
2. Masukkan selektor CSS yang mengidentifikasi elemen yang diperlukan.
3. Klik Find, periksa hasil yang cocok, lalu salin hasil atau kode C# yang dibuat.

Memilih Elemen HTML dengan Selektor CSS di C#

Aspose.HTML for .NET menyediakan metode selektor standar melalui DOM HTML. Contoh ini memuat URL yang ditampilkan dalam widget dan menggunakan QuerySelectorAll() untuk mengembalikan semua hasil sebagai NodeList. Saat URL atau selektor dalam widget diubah, contoh C# yang dirender di server ini diperbarui secara otomatis. Gunakan QuerySelector() jika hanya elemen pertama yang cocok yang diperlukan.

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);
}

Pola Selektor CSS yang Umum

Selektor CSS menemukan elemen berdasarkan nama, ID, class, atribut, posisi, atau hubungan DOM:

• p cocok dengan setiap elemen <p>.
• #summary cocok dengan elemen yang id-nya adalah summary.
• .notice cocok dengan elemen yang memiliki class notice.
• a[href] cocok dengan tautan yang memiliki atribut href.
• article > p cocok dengan elemen <p> yang merupakan turunan langsung dari elemen <article>.
• h1, h2 cocok dengan elemen yang dipilih oleh salah satu ekspresi.

Selektor CSS tidak menyediakan kondisi umum untuk mencocokkan teks yang terlihat. Jika kueri perlu memeriksa konten teks, menelusuri elemen induk, atau menerapkan predikat yang lebih kompleks, gunakan XPath Tester .

Menggunakan API CSS Selector di C#

1. Buat HTMLDocument dari file HTML lokal atau URL.
2. Tentukan selektor yang cocok dengan elemen yang diperlukan.
3. Panggil QuerySelector() untuk satu elemen atau QuerySelectorAll() untuk semua hasil yang cocok.
4. Baca properti seperti TextContent, InnerHTML, atau OuterHTML, atau perbarui elemen DOM yang dipilih.

Pemilihan saja tidak mengubah dokumen sumber. Jika Anda mengubah elemen yang dikembalikan dan perlu menyimpan hasilnya, simpan HTMLDocument yang telah diperbarui secara eksplisit.

Dokumentasi Selektor CSS dan Referensi API

Gunakan sumber daya berikut untuk mempelajari sintaks selektor, navigasi DOM, dan contoh C# bagi aplikasi produksi:

• How to Use CSS Selectors in C# menjelaskan QuerySelector() dan QuerySelectorAll() melalui contoh praktis.
• CSS Selector Types and Syntax membahas selektor jenis, class, ID, atribut, kombinator, dan pseudo-class.
• HTML Navigation in C# membandingkan penelusuran DOM langsung, selektor CSS, dan kueri XPath.

Instal Aspose.HTML for .NET

Instal Aspose.HTML for .NET dari NuGet menggunakan .NET CLI:

dotnet add package Aspose.HTML

Anda juga dapat menggunakan antarmuka NuGet Package Manager atau menjalankan Install-Package Aspose.HTML di Package Manager Console. Lihat panduan instalasi untuk detail penyiapan, atau minta lisensi sementara untuk mengevaluasi API tanpa batasan evaluasi.

FAQ

1. Apa itu selektor CSS?

Selektor CSS adalah pola yang mengidentifikasi elemen HTML berdasarkan nama tag, ID, class, atribut, posisi, atau hubungan dengan elemen lain. Browser dan DOM API menggunakan sintaks selektor yang sama untuk menerapkan gaya dan mencari elemen.

2. Apa perbedaan antara QuerySelector() dan QuerySelectorAll()?

Metode QuerySelector() mengembalikan elemen pertama yang cocok atau null. Metode QuerySelectorAll() mengembalikan NodeList berisi semua elemen yang cocok; daftar tersebut kosong jika tidak ada yang cocok.

3. Dapatkah selektor CSS menemukan elemen berdasarkan teksnya?

Selektor CSS standar tidak menyediakan kondisi umum untuk konten teks. Pilih elemen kandidat dan periksa TextContent di C#, atau gunakan XPath jika ekspresi itu sendiri harus mencocokkan teks.

4. Mengapa selektor CSS saya tidak mengembalikan hasil?

Periksa sintaks selektor, ejaan class dan ID, nilai atribut, serta hubungan induk-turunan terhadap HTML yang dimuat. Spasi memilih semua turunan, sedangkan > hanya memilih turunan langsung.