Использование CSS-селекторов в GrabzIt

Селекторы CSS используются в целевом элементе, скрывают элемент и ждут, пока функции элемента идентифицируют один или несколько элементов HTML. Два основных типа селекторов CSS — выбор по идентификатору или классу. Элемент 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, в этом случае п-й ребенок (2) селектор вроде так: .myclass:nth-child(2) чтобы выбрать второй диапазон myclass. Однако это будет работать только в этом случае, поскольку под родительским элементом div нет других элементов. Если бы существовал, например, элемент ap, он изменил бы индекс nth-child.

Выберите элемент HTML без уникального идентификатора или класса.

Иногда элемент HTML, который вам нужно выбрать, не имеет уникального идентификатора или класса на странице. При выборе этих элементов HTML требуется более сложный селектор CSS.

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

Например, в приведенном выше примере мы хотим выбрать элемент DIV внутри ссылки. Для этого нам нужно указать селектор CSS, который работает на основе уникального DIV с Header класса.

div.Header a div

Селекторы CSS — стандартная функция веб-разработки. Эта статья дает хороший обзор как использовать селекторы CSS.

Обработка нескольких совпадающих элементов

Если из селектора CSS возвращается несколько элементов HTML, и вы используете целевой элемент или ждете функций элемента, будет использоваться только первый соответствующий элемент. Однако если вы используете функцию скрытия элемента, все соответствующие элементы HTML будут скрыты.

Если вы хотите скрыть несколько элементов с разными идентификаторами или классами, вы можете сделать это, разделив каждый CSS-селектор запятой. Например, чтобы скрыть приведенный выше пример класса и идентификатора, вы должны использовать следующее #myidentifier,.myclass