ทดสอบ CSS Selector ออนไลน์และคิวรี C#

ทดสอบ CSS Selector ออนไลน์

ใช้ CSS Selector Tester เพื่อค้นหาองค์ประกอบในหน้าเว็บสาธารณะด้วย CSS Selector ป้อน URL และ Selector เช่น article h2, .product-card หรือ a[href] เครื่องมือจะแสดงองค์ประกอบ HTML ที่ตรงกันและสร้างโค้ด C# สำหรับคิวรีเดียวกัน

1. ป้อน URL ของหน้าเว็บที่ต้องการตรวจสอบ
2. ป้อน CSS Selector ที่ระบุองค์ประกอบที่ต้องการ
3. คลิก Find ตรวจสอบผลลัพธ์ และคัดลอกผลลัพธ์หรือโค้ด C# ที่สร้างขึ้น

เลือกองค์ประกอบ HTML ด้วย CSS Selector ใน C#

Aspose.HTML for .NET มีเมธอด Selector มาตรฐานผ่าน HTML DOM ตัวอย่างนี้โหลด 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 ตรงกับองค์ประกอบที่มี class notice
• a[href] ตรงกับลิงก์ที่มีแอตทริบิวต์ href
• article > p ตรงกับองค์ประกอบ <p> ที่เป็นลูกโดยตรงของ <article>
• h1, h2 ตรงกับองค์ประกอบที่เลือกโดยนิพจน์ใดนิพจน์หนึ่ง

CSS Selector ไม่มีเงื่อนไขทั่วไปสำหรับจับคู่ข้อความที่มองเห็นได้ หากคิวรีต้องตรวจสอบเนื้อหาข้อความ ย้อนขึ้นไปยังองค์ประกอบบรรพบุรุษ หรือใช้ Predicate ที่ซับซ้อนกว่า ให้ใช้ XPath Tester

ใช้ CSS Selector API ใน C#

1. สร้าง HTMLDocument จากไฟล์ HTML ในเครื่องหรือ URL
2. กำหนด Selector ที่ตรงกับองค์ประกอบที่ต้องการ
3. เรียก QuerySelector() สำหรับหนึ่งองค์ประกอบ หรือ QuerySelectorAll() สำหรับผลลัพธ์ทั้งหมด
4. อ่านพร็อพเพอร์ตี เช่น TextContent, InnerHTML หรือ OuterHTML หรืออัปเดตองค์ประกอบ DOM ที่เลือก

การเลือกองค์ประกอบเพียงอย่างเดียวจะไม่แก้ไขเอกสารต้นฉบับ หากแก้ไของค์ประกอบที่ส่งคืนและต้องการเก็บผลลัพธ์ ให้บันทึก HTMLDocument ที่อัปเดตอย่างชัดเจน

เอกสาร CSS Selector และ API Reference

ใช้แหล่งข้อมูลต่อไปนี้สำหรับไวยากรณ์ Selector การนำทาง DOM และตัวอย่าง C# สำหรับการใช้งานจริง

• How to Use CSS Selectors in C# อธิบาย QuerySelector() และ QuerySelectorAll() พร้อมตัวอย่างใช้งานจริง
• CSS Selector Types and Syntax ครอบคลุม Selector ตามชนิด class, ID, แอตทริบิวต์ Combinator และ Pseudo-class
• HTML Navigation in C# เปรียบเทียบการนำทาง DOM โดยตรง CSS Selector และคิวรี XPath

ติดตั้ง Aspose.HTML for .NET

ติดตั้ง Aspose.HTML for .NET จาก NuGet ด้วย .NET CLI:

dotnet add package Aspose.HTML

คุณยังสามารถใช้หน้าต่าง NuGet Package Manager หรือเรียกใช้ Install-Package Aspose.HTML ใน Package Manager Console ได้ ดูรายละเอียดการตั้งค่าใน คู่มือการติดตั้ง หรือขอ ใบอนุญาตชั่วคราว เพื่อประเมิน API โดยไม่มีข้อจำกัดของเวอร์ชันทดลอง

คำถามที่พบบ่อย

1. CSS Selector คืออะไร?

CSS Selector คือรูปแบบที่ระบุองค์ประกอบ HTML ตามชื่อแท็ก ID, class, แอตทริบิวต์ ตำแหน่ง หรือความสัมพันธ์กับองค์ประกอบอื่น เบราว์เซอร์และ DOM API ใช้ไวยากรณ์ Selector เดียวกันสำหรับการกำหนดสไตล์และการค้นหาองค์ประกอบ

2. เมธอด QuerySelector() และ QuerySelectorAll() แตกต่างกันอย่างไร?

เมธอด QuerySelector() ส่งคืนองค์ประกอบแรกที่ตรงกันหรือ null ส่วน QuerySelectorAll() ส่งคืน NodeList ที่มีองค์ประกอบทั้งหมดที่ตรงกัน และรายการจะว่างเมื่อไม่พบผลลัพธ์

3. CSS Selector ค้นหาองค์ประกอบจากข้อความได้หรือไม่?

CSS Selector มาตรฐานไม่มีเงื่อนไขทั่วไปสำหรับเนื้อหาข้อความ ให้เลือกองค์ประกอบที่เป็นไปได้แล้วตรวจสอบ TextContent ใน C# หรือใช้ XPath เมื่อนิพจน์ต้องจับคู่ข้อความโดยตรง

4. เหตุใด CSS Selector จึงไม่ส่งคืนผลลัพธ์?

ตรวจสอบไวยากรณ์ Selector การสะกด class และ ID ค่าแอตทริบิวต์ และความสัมพันธ์ระหว่างองค์ประกอบกับ HTML ที่โหลด ช่องว่างเลือกองค์ประกอบสืบทอดทั้งหมด ส่วน > เลือกเฉพาะลูกโดยตรง