原文连接：https://jzchangmark.wordpress.com/2015/03/16/selenium-%E4%BD%BF%E7%94%A8-css-locator-%E5%AE%9A%E4%BD%8D%E5%85%83%E4%BB%B6/
Selenium 提供多種 locator strategy，本篇文章將說明透過 CSS locator 來定位 HTML element。將用以下幾個 Case 說明：
Case 1.
首先，我們先了解透過 CSS 抓取 element 的方式與透過 id、class name 與節點名稱方式來抓取 element，以下面 HTML 原始碼來說明。
要透過 id 抓取 element，呼叫 find_element_by_css_selector() 帶入的參數為 id 屬性值前面加上「#」，此方法與 find_element_by_id() 執行結果一樣。
find_element_by_css_selector("#igl")
find_element_by_id("igl")
透過 class 抓取 element，帶入的參數為 class 屬性值前面加上「.」，結果與 find_element_by_class_name() 一樣。
find_element_by_css_selector(".cgl")
find_element_by_class_name("cgl")
如果一個 class 裡包含多個 class 情況，HTML 原始碼如下。
則不管抓取 cgl_a 或 cgl_b 的結果都會一樣，程式碼如下所示。
find_element_by_css_selector(".cgl_a")
find_element_by_css_selector(".cgl_b")
但如果就是想抓取 class="cgl_a cgl_b" 屬性值為 “cgl_a cgl_b" 的 element 的話，無法透過 find_element_by_css_selector(“.cgl_a cgl_b") 方式抓取，則要用下面 Case 3 提到的方法來抓取 element。
透過節點名稱抓取 element，參數直接帶入節點的名稱，與 find_element_by_tag_name() 執行結果一樣。
find_element_by_css_selector("input")
find_element_by_tag_name("input")
Case 2.
要抓取某個節點內的 element，HTML 原始碼如下所示，我們要抓取第 5 行的 element。
Chrome
Firefox
如果我們直接抓取 class 屬性值為 sub_title 會找到兩個 element，分別會找到第 2 行與第 5 行 element，但我們只想抓到第 5 行 element。
可看到要抓取的 element 是在 li 節點內，且 li element 的 class 為 st2 ，因此可以透過 “li.st2″ 先抓到父節點，再往下找 “h2″ 子節點，就可以正確抓取到 element，程式碼如下所示。
find_element_by_css_selector("li.st2 h2")
Case 3.
透過 element 裡的屬性值定位 element，HTML 原始碼如下所示。
`<``a` `title``=``"yh"` `href``=``"[http://www.yahoo.com](http://www.yahoo.com/)"``>Yahoo`
抓取 element 中 title 屬性值為 yh，要在 [ ] 裡代入識別的屬性值與某個值相同，程式碼如下所示。
find_element_by_css_selector("a[title='yh']")
Case 4.
在上一個例子，能抓取到屬性值相符的 element，但有時候我們會看到某些屬性值，會有某些字串開頭、結尾或包含有某些字串，以下面為 HTML 程式碼為範例，每個 class 屬性值都是 cls 開頭的值。
A1
B2
C3
我們就可以透過以下程式碼，抓取到 3 個 class 屬性值為 cls 開頭的 element。
driver.find_elements_by_css_selector("h1[class^='cls']")
[class^=’cls’] 抓取 class 屬性值為 “cls" 開頭的 element
[class$=’cls’] 抓取 class 屬性值為 “cls" 結尾的 element
[class*=’cls’] 抓取 class 屬性值中包含字串 “cls" 的 element
Case 5.
只抓取含有特定屬性的 element，我們要抓取第 2 行超連結的element，HTML 原始碼如下所示。
`<``a` `href``=``"[http://www.yahoo.com](http://www.yahoo.com/)"` `alt``=``"yahoo"``>Yahoo!`
`<``a` `title``=``"t2"` `href``=``"[http://www.google.com](http://www.google.com/)"` `class``=``"gls"``>Google 2`
我們只想抓取含有 title、href 與 class 屬性的 element，程式碼如下所示。
find_element_by_css_selector("a[title][href][class]")
Case 6.
只抓取某節點中第幾個 element，以下面 HTML 原始碼為範例。
First
Second
Third
如要抓取 td 標籤中第 1 個 element，可以在節點名稱後加入:first-child，抓到
find_element_by_css_selector("td:first-child")
如要抓取 td 標籤中第 3 個 element，可以在節點名稱後加入:nth-child(3)，括號中代入索引值，會抓到
find_element_by_css_selector("td:nth-child(3)")
Case 7.
最後我們用一個例子，來說明抓取 element 可以透過多種方式來抓取同一個 element，HTML 原始碼如下所示。
我們欲抓取第 2 行的 input element，可以透過下列方法抓取到 input element，使用者根據不同的結構選擇不同的定位方式。
find_element_by_css_selector("#igl")
find_element_by_css_selector("input")
find_element_by_css_selector("div input")
find_element_by_css_selector("div input#igl")
find_element_by_css_selector("div.dgl input")
find_element_by_css_selector("div.dgl input#igl")
find_element_by_css_selector("div input[value='Google']")
find_element_by_css_selector("div[class='dgl'] input[value='Google'][id='igl']")
以上幾個 Case 均已能滿足大部份的需求，其他更進階的應用可以參考這邊。