CSS Selector 온라인 테스터와 C# 쿼리

CSS 선택기 온라인 테스트

CSS Selector Tester를 사용하면 CSS 선택기로 공개 웹페이지의 요소를 찾을 수 있습니다. URL과 article h2, .product-card, a[href] 같은 선택기를 입력합니다. 도구는 일치하는 HTML 요소를 표시하고 동일한 쿼리를 위한 C# 코드를 생성합니다.

1. 검사할 웹페이지의 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, class, 특성, 위치 또는 DOM 관계를 기준으로 요소를 찾습니다.

• p는 모든 <p> 요소와 일치합니다.
• #summary는 id가 summary인 요소와 일치합니다.
• .notice는 notice class를 가진 요소와 일치합니다.
• a[href]는 href 특성이 있는 링크와 일치합니다.
• article > p는 <article>의 직접 자식인 <p> 요소와 일치합니다.
• h1, h2는 두 표현식 중 하나로 선택되는 요소와 일치합니다.

CSS 선택기에는 표시되는 텍스트를 일치시키는 일반적인 조건이 없습니다. 텍스트 내용을 검사하거나 상위 요소로 이동하거나 더 복잡한 조건자를 적용해야 한다면 XPath Tester 를 사용하십시오.

C#에서 CSS Selector API 사용하기

1. 로컬 HTML 파일 또는 URL에서 HTMLDocument 를 만듭니다.
2. 필요한 요소와 일치하는 선택기를 정의합니다.
3. 하나의 요소에는 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 에서는 형식, class, 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, class, 특성, 위치 또는 다른 요소와의 관계를 기준으로 HTML 요소를 식별하는 패턴입니다. 브라우저와 DOM API는 스타일 적용과 요소 검색에 동일한 선택기 구문을 사용합니다.

2. QuerySelector()와 QuerySelectorAll()의 차이점은 무엇인가요?

QuerySelector()는 첫 번째 일치 요소를 반환하고 없으면 null을 반환합니다. QuerySelectorAll()은 모든 일치 요소가 포함된 NodeList를 반환하며 일치 항목이 없으면 목록이 비어 있습니다.

3. CSS 선택기로 텍스트를 기준으로 요소를 찾을 수 있나요?

표준 CSS 선택기에는 텍스트 콘텐츠에 대한 일반적인 조건이 없습니다. 후보 요소를 선택하고 C#에서 TextContent를 검사하거나 표현식 자체가 텍스트를 일치시켜야 할 때 XPath를 사용하십시오.

4. CSS 선택기가 아무 결과도 반환하지 않는 이유는 무엇인가요?

로드된 HTML을 기준으로 선택기 구문, class와 ID 철자, 특성 값, 부모-자식 관계를 확인하십시오. 공백은 모든 하위 요소를 선택하고 >는 직접 자식만 선택합니다.