捕獲和轉換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 選擇器來執行此操作 第 n 個孩子(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插入並單擊 檢查。這將打開檢查器視窗。

右鍵單擊檢查器視窗中的元素單擊 複製 然後單擊 複製選擇器.