GrabzIt에서 CSS 선택기 사용하기

CSS 선택기는 대상 요소, 요소 숨기기 및 요소 기능이 하나 이상의 HTML 요소를 식별할 때까지 기다립니다. CSS 선택기의 두 가지 주요 유형은 ID 또는 클래스로 선택하는 것입니다. 아래와 같이 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 요소 아래에 다른 요소가 없기 때문에 이 경우에만 작동합니다. 예를 들어 ap 요소가 있으면 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