GrabzItでCSSセレクターを使用する

CSS セレクターはターゲット要素で使用され、要素を非表示にし、要素機能が XNUMX つ以上の HTML 要素を識別するのを待ちます。 CSS セレクターの主な XNUMX つのタイプは、ID またはクラスのいずれかによって選択することです。以下に示すように、HTML 要素に id 属性が含まれている場合、HTML 要素には id が含まれます。

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

それを選択するには、次のような CSS セレクターを作成します。 #myidentifier

HTML 要素にクラスがある場合は、この例に示すように class 属性があります。

<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) をクリックして、XNUMX 番目の 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 セレクターは、Web 開発の標準機能です。この記事では、以下の概要を説明します CSSセレクターの使い方.

複数の一致する要素の処理

CSS セレクターから複数の HTML 要素が返され、ターゲット要素を使用している場合、または要素の機能を待機している場合は、最初に一致した要素のみが使用されます。ただし、要素の非表示機能を使用している場合は、一致する HTML 要素がすべて非表示になります。

異なる ID またはクラスを持つ複数の要素を非表示にしたい場合は、各 CSS セレクターをカンマで区切ることで非表示にすることができます。たとえば、上記のクラスと ID の例を非表示にするには、次のコードを使用します。 #myidentifier,.myclass

その他の Web キャプチャに関する記事コミュニティ質問