웹 캡처 및 변환 도구

GrabzIt에서 CSS 선택기 사용하기

CSS 선택기는 대상 요소에서 사용되며 요소를 숨기고 요소 기능이 하나 이상의 HTML 요소를 식별 할 때까지 기다립니다. CSS 선택기의 두 가지 주요 유형은 id 또는 class로 선택하는 것입니다. 아래와 같이 id 속성이 포함 된 HTML 요소에는 id가 있습니다.

<span id="myidentifier">Example Text</span>

그것을 선택하려면 다음과 같은 CSS 선택기를 만듭니다. #myidentifier

HTML 요소에 클래스가 있으면이 예제와 같이 클래스 속성이 있습니다.

<div>
<span class="myclass">Example Text One</span>
<span class="myclass">Example Text Two</span>
<span class="myclass">Example Text Three</span>
</div>

그것을 선택하려면 다음과 같은 CSS 선택기를 만듭니다. .myclass

클래스를 사용하여 특정 요소를 선택하려면 myclass 이 경우 표준 CSS 선택기를 사용하여 n- 자식 (2) 이렇게 선택기 : .myclass:nth-child(2) 두 번째 myclass 범위를 선택합니다. 그러나 부모 div 요소 아래에 다른 요소가 없기 때문에이 경우에만 작동합니다. 예를 들어 p 요소가 있다면 n 번째 자식 인덱스를 변경합니다.

고유 한 ID 또는 클래스가없는 HTML 요소를 선택하십시오.

선택해야하는 HTML 요소에 페이지 내에서 고유 한 ID 또는 클래스가없는 경우가 있습니다. 이러한 HTML 요소를 선택할 때는보다 복잡한 CSS 선택기가 필요합니다.

<div class="Header">
   <a href="https://www.example.com/">
     <div>...</div>
   </a>
   <div class="SearchBar">...</div>
   <div class="TagLine">...</div>
</div>

예를 들어, 위의 예에서는 링크 내에서 DIV 요소를 선택하려고합니다. 이렇게하려면 고유 한 DIV에서 작동하는 CSS 선택기를 지정해야합니다. Header 클래스입니다.

div.Header a div

CSS 선택기는 웹 개발의 표준 기능입니다. 이 기사는 다음에 대한 좋은 개요를 제공합니다. CSS 선택기를 사용하는 방법.

여러 개의 일치하는 요소 처리

CSS 선택기에서 여러 HTML 요소가 반환되고 대상 요소를 사용하거나 요소 기능을 기다리는 경우 첫 번째 일치하는 요소 만 사용됩니다. 그러나 요소 숨기기 기능을 사용하는 경우 일치하는 모든 HTML 요소가 숨겨집니다.

다른 ID 또는 클래스로 여러 요소를 숨기려면 각 CSS 선택기를 쉼표로 구분하여 그렇게 할 수 있습니다. 예를 들어 위의 예제 클래스와 id를 숨기려면 다음을 사용하십시오. #myidentifier,.myclass