CSS-selectors gebruiken in GrabzIt

CSS-kiezers worden gebruikt in het doelelement, verbergen het element en wachten tot elementfuncties een of meer HTML-elementen identificeren. De twee belangrijkste typen CSS-selectors zijn selecteren op id of klasse. Een HTML-element heeft een id als het het id-attribuut bevat, zoals hieronder weergegeven.

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

Om het te selecteren, maakt u een CSS-selector zoals #myidentifier

Als een HTML-element een klasse heeft, heeft het het class-attribuut, zoals weergegeven in dit voorbeeld.

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

Om het te selecteren, maakt u een CSS-selector zoals .myclass

Als u een bepaald element met de klasse van wilt selecteren myclass U kunt hiervoor standaard CSS-kiezers gebruiken, in dit geval de zoveelste kind(2) selectie als volgt: .myclass:nth-child(2) om de tweede myclass-reeks te selecteren. Dit werkt echter alleen in dit geval omdat er geen andere elementen onder het bovenliggende div-element staan. Als er bijvoorbeeld een ap-element zou zijn, zou dit de n-de-kindindex veranderen.

Selecteer een HTML-element zonder een unieke id of klasse

Soms heeft een HTML-element dat u moet selecteren geen ID of klasse die uniek is binnen een pagina. Bij het selecteren van deze HTML-elementen is een ingewikkeldere CSS-selector vereist.

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

In het bovenstaande voorbeeld willen we bijvoorbeeld het DIV-element binnen de link selecteren. Om dit te doen, moeten we een CSS-selector specificeren die werkt vanaf de unieke DIV met de Header klasse.

div.Header a div

CSS-selectors zijn een standaardfunctie van webontwikkeling. Dit artikel geeft een goed overzicht van Hoe CSS-kiezers te gebruiken.

Meerdere overeenkomende elementen verwerken

Als er meerdere HTML-elementen worden geretourneerd door een CSS-selector en u het doelelement gebruikt of wacht op elementfuncties, wordt alleen het eerste overeenkomende element gebruikt. Als u echter de functie voor het verbergen van elementen gebruikt, worden alle overeenkomende HTML-elementen verborgen.

Als u meerdere elementen met verschillende ID's of klassen wilt verbergen, kunt u dit doen door elke CSS-selector te scheiden met een komma. Dus om bijvoorbeeld de voorbeeldklasse en id hierboven te verbergen, zou je het volgende gebruiken #myidentifier,.myclass