捕获和转换Web的工具

在GrabzIt中使用CSS选择器

CSS选择器用于在目标元素、隐藏元素和等待元素特性中识别一个或多个HTML元素。 CSS 选择器的两种主要类型是通过 id 或 class 选择。 如果 HTML 元素包含 id 属性,则该元素具有 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 选择器来执行此操作 nth-child(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 元素。 为此,我们需要指定一个 CSS 选择器,该选择器从唯一的 DIV 向下工作,并带有 Header 类。

div.Header a div

CSS 选择器是 Web 开发的标准功能。 这篇文章很好地概述了 如何使用 CSS 选择器.

处理多个匹配元素

如果从 CSS 选择器返回多个 HTML 元素,并且您正在使用目标元素或等待元素功能,则只会使用第一个匹配元素。 但是,如果您使用隐藏元素功能,所有匹配的 HTML 元素都将被隐藏。

如果您想隐藏具有不同 id 或类的多个元素,您可以通过用逗号分隔每个 CSS 选择器来实现。 例如,要隐藏上面的示例类和 id,您可以使用以下命令 #myidentifier,.myclass

从浏览器获取 CSS 选择器

您可以通过两个简单的步骤从 Chrome 浏览器获取 CSS 选择器。

右键单击您所在网页的部分 int插入并单击 检查。 这将打开检查器窗口。

右键单击检查器窗口中的元素单击 复制 依次 复制选择器.