CSS選擇器用於目標元素,隱藏元素並等待元素功能標識一個或多個HTML元素。 CSS選擇器的兩種主要類型是按id或按類別選擇。 如果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元素,並且您正在使用target元素或等待元素功能,則僅使用第一個匹配元素。 但是,如果您使用hide元素功能,則所有匹配的HTML元素都將被隱藏。
如果要隱藏具有不同ID或類的多個元素,可以通過用逗號分隔每個CSS選擇器來實現。 因此,例如,要隱藏上面的示例類和ID,可以使用以下代碼 #myidentifier,.myclass