Korzystanie z selektorów CSS w GrabzIt

Selektory CSS są używane w elemencie docelowym, ukrywają element i czekają, aż funkcje elementu zidentyfikują jeden lub więcej elementów HTML. Dwa główne typy selektorów CSS to wybieranie według identyfikatora lub klasy. Element HTML ma identyfikator, jeśli zawiera atrybut id, jak pokazano poniżej.

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

Aby go wybrać, utwórz selektor CSS, taki jak #myidentifier

Jeśli element HTML ma klasę, będzie miał atrybut class, jak pokazano w tym przykładzie.

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

Aby go wybrać, utwórz selektor CSS, taki jak .myclass

Jeśli chcesz wybrać konkretny element z klasą myclass w tym przypadku możesz użyć standardowych selektorów CSS n-te dziecko(2) selektor taki: .myclass:nth-child(2) aby wybrać drugi zakres myclass. Jednak zadziała to tylko w tym przypadku, ponieważ pod nadrzędnym elementem div nie ma żadnych innych elementów. Jeśli na przykład istniałby element ap, zmieniłby on indeks n-tego dziecka.

Wybierz element HTML bez unikalnego identyfikatora lub klasy

Czasami element HTML, który należy wybrać, nie ma identyfikatora ani klasy unikalnej w obrębie strony. Podczas wybierania tych elementów HTML wymagany jest bardziej skomplikowany selektor CSS.

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

Na przykład w powyższym przykładzie chcemy wybrać element DIV w łączu. Aby to zrobić, musimy określić selektor CSS, który działa w dół od unikalnego DIV z Header class.

div.Header a div

Selektory CSS są standardową funkcją tworzenia stron internetowych. Ten artykuł zawiera dobry przegląd jak używać selektorów CSS.

Obsługa wielu pasujących elementów

Jeśli z selektora CSS zostanie zwróconych wiele elementów HTML, a Ty używasz elementu docelowego lub czekasz na funkcje elementu, zostanie użyty tylko pierwszy pasujący element. Jeśli jednak użyjesz funkcji ukrywania elementów, wszystkie pasujące elementy HTML zostaną ukryte.

Jeśli chcesz ukryć wiele elementów o różnych identyfikatorach lub klasach, możesz to zrobić, oddzielając każdy selektor CSS przecinkiem. Na przykład, aby ukryć powyższą przykładową klasę i identyfikator, użyj poniższego #myidentifier,.myclass