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 个子索引。
有时,您需要选择的 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