# 9L WebDriver – 定位元素：第 3a 部分（按`cssSelector`定位） > 原文： [https://javabeginnerstutorial.com/selenium/9l-webdriver-locating-elements-3a/](https://javabeginnerstutorial.com/selenium/9l-webdriver-locating-elements-3a/) 嗨呀測試人員！ 讓我們直接進入`cssSelector`定位策略。 如果我們沒有選擇使用 ID，類或名稱來查找元素的方法，該怎么辦？ 袖子上有東西嗎？ 好吧，我有一個`cssSelector`。 這是一種先進而有效的策略。 ##### 熱身 * **CSS** （級聯樣式表）。 根據維基百科的說法，“CSS 是一種樣式表語言，用于描述以標記語言編寫的文檔的表示形式”。 它通過添加樣式來更改 HTML 元素的外觀，并定義應如何在網頁上顯示它們。 * **選擇器**是使用 HTML 標記，屬性及其值構造的模式。 然后將它們用于匹配所需的 Web 元素。 ##### 使用`cssSelector`定位器優于 XPath 定位器的優點 * 速度更快，尤其是在 Internet Explorer 中 * 更簡單 * 更具可讀性 * 首選使用方式 ## 通過`cssSelector`定位 有多種使用`cssSelector`定位器的方式，這取決于可用的標簽，屬性，關鍵字等。要列出它們， 1. 使用標簽和 ID 屬性 2. 使用標簽和類屬性 3. 使用標簽和名稱屬性 4. 使用標簽和多個屬性 5. 定位子元素 6. 按子字符串匹配 在這篇文章中，我們將介紹前四種方法。 是時候一步一步地完成這些工作了。 ## 1.使用標簽和 ID 屬性 借助`cssSelector`定位策略，可以使用元素的 HTML 標記及其 ID 屬性及其值來對其進行訪問。 有兩種方法可以實現此目的： **語法**：`driver.findElement(By.cssSelector("tag_name#value_of_id"));` 或 `driver.findElement(By.cssSelector("tag_name[id='value_of_id']"));;` **說明**：使用匹配的 CSS 選擇器定位元素。 在第一種方法中，`#`符號代表“`id`”屬性。 **示例**：讓我們在 Gmail 帳戶登錄頁面上找到“電子郵件”文本框。 右鍵單擊“輸入電子郵件”文本框，然后選擇檢查元素以獲取相應的 HTML 代碼。 我們可以看到“`input`”標簽的“`id`”屬性為“`email`”。 *代碼：* ```java driver.findElement(By.cssSelector("input#Email")); ``` （或者） ```java driver.findElement(By.cssSelector("input[id='Email']")); ```  ## 2.使用標簽和類屬性 元素的 HTML 標簽及其類屬性及其值可用于訪問它。 也有兩種方法可以實現此目的， **語法**：`driver.findElement(By.cssSelector("tag_name.value_of_class"));` 或 `driver.findElement(By.cssSelector("tag_name[class='value_of_class']”));` **說明**：使用匹配的 CSS 選擇器定位元素。 在第一種方法中，“`.`”符號代表“`class`”屬性。 **示例**：讓我們在使用類屬性的 Gmail 帳戶“注冊”頁面上找到“手機”文本框。 右鍵點擊“手機”文本框，然后選擇檢查元素，以獲取相應的 HTML 代碼，如下所示， ```java <input?? tabindex="0" name="RecoveryPhoneNumber" id="RecoveryPhoneNumber" value="" class="i18n_phone_number_input-inner_input" type="tel"> ``` 我們可以看到“`input`”標簽具有“`class`”屬性，名稱為“`i18n_phone_number_input-inner_input`”。 *代碼：* ```java driver.findElement(By.cssSelector("input.i18n_phone_number_input-inner_input ")); ``` (or) ```java driver.findElement(By.cssSelector("input[class='i18n_phone_number_input-inner_input']")); ``` ## 3.使用標簽和名稱屬性 元素的 HTML 標記及其名稱屬性及其值可用于訪問它。 **語法**：`driver.findElement(By.cssSelector("tag_name[name='value_of_name']"))` **說明**：使用匹配的 CSS 選擇器定位元素。 **示例**：讓我們在 Gmail 帳戶注冊頁面上找到名字文本框。 右鍵點擊“名字”文本框，然后選擇檢查元素，以獲取相應的 HTML 代碼，如下所示， ```java <input value="" name="FirstName" id="FirstName" spellcheck="false" class="?? form-error" aria-invalid="true" type="text"> ``` 我們可以看到，“`input`”標簽的“`name`”屬性為“`FirstName`”。 *代碼：* ```java driver.findElement(By.cssSelector("input[name='FirstName']")); ``` ## 4.使用標簽和多個屬性 元素的 HTML 標簽和一個以上的屬性及其值可用于訪問它。 **語法**：`driver.findElement(By.cssSelector("tag_name[attribute1='value_of_attribute1'][attribute2='value_of_attribute2']"))` **說明**：使用匹配的 CSS 選擇器定位元素。 以這種方式可以提到許多屬性。 **示例**：讓我們使用 ID，類型和名稱屬性在 Gmail 帳戶注冊頁面上找到“創建密碼”文本框。 右鍵點擊“創建密碼”文本框，然后選擇檢查元素以獲取相應的 HTML 代碼，如下所示， ```java <input name="Passwd" id="Passwd" type="password"> ``` 我們可以看到，“`input`”標簽具有“`name`”和“`id`”屬性，它們的值均為“`Passwd`”，“`type`”屬性為`password`。 *代碼：* ```java driver.findElement(By.cssSelector("input#Passwd[name='Passwd']")); ``` (or) ```java driver.findElement(By.cssSelector("input[type='Password'][name='Passwd'")); ``` 如果使用 id，則可以用“`#`”符號表示，而可以用“`.`”符號表示類。 *感覺都糟透了嗎？ 需要一些時間練習嗎？* 我知道，您急需先休息一下。 你的愿望就是我的命令！ 現在，時間全在您了。 我們的下一篇文章很快見。 祝你有美好的一天！