1.1 CSS定位
1.1.1 絕對路徑定位
目標
查找第一個文本為“猜猜看”的a標簽
實現
CSS表達式
html>body>div>a[.=”猜猜看”]
python表達式
driver.find_element_by_css_selector(‘html>body>div>a[.=”猜猜看”]’)
1.1.2 相對路徑定位
目標
查找第一個文本為“猜猜看”的a標簽
實現
CSS表達式
a[.=”猜猜看”]
Python表達式
driver.find_element_by_css_selector(‘a[.=”猜猜看”]’)
1.1.3 類名定位
目標
查找第一個類名為“blogpost-body”的div元素
實現
CSS表達式
div. blogpost-body
python表達式
driver.find_element_by_css_selector(“div. blogpost-body”)
說明
對於復合class，如<input class=”btn btn-lg btn-default” type=”text”>，直接寫上所有的class即可，即：driver.find_element_by_css_selector(“input. btn.btn-lg.btn-default”)
標簽名不是必須的
1.1.4 屬性定位
1.1.4.1 ID屬性定位
目標
查找頁面中第一個id為“cnblogs_post_body”div元素
實現
CSS表達式
div# cnblogs_post_body
Python表達式
driver.find_element_by_css_selector(“div# cnblogs_post_body”)
1.1.4.2 其他屬性定位
其他屬性是指除id、class以外的所有屬性，如img的src、alt屬性，input的type、placeholder等
目標
查找頁面中alt屬性等於"點我試試呀"的img元素
實現
CSS表達式
img[alt=”點我試試呀”]
Python表達式
driver.find_element_by_css_selector(‘img[alt=”點我試試呀”]’)
說明
如果單獨依靠某個屬性無法唯一定位元素，則可以寫多個屬性，如下：
img[alt=”點我試試呀”][src=”/images/bg.jpg”]
driver.find_element_by_css_selector(‘img[alt=”點我試試呀”] [src=”/images/bg.jpg”]’)
1.1.4.3 模糊屬性定位
模糊屬性定位經常使用的三個正則表達式^、$、*
目標
查找鏈接地址是“http://www.baidu.com”的a標簽
CSS表達式
a[href^=”http://www.baidu”]
a[href$=”baidu.com”]
a[href*=”baidu”]
python表達式
find_element_by_css_selector(‘a[href^=”http://www.baidu”]’)
find_element_by_css_selector(‘a[href^=” a[href$=”baidu.com”]’)
find_element_by_css_selector(‘a[href*=”baidu”]’)
1.1.5 子頁面元素查找
目標
查找id為home的div下的class為highlighter-rouge的div
CSS表達式
div#home>div.highlighter-rouge
python表達式
driver.find_element_by_css_selector(“div#home>div.highlighter-rouge”)
1.1.6 偽類定位
目標
查找div#home下的第一個子元素
CSS表達式
div#home :first-child
python表達式
dirver..find_element_by_css_selector(“div#home :first-child”)
附錄：
CSS偽類
1.1 CSS偽類
| 選擇器 |
示例 |
示例說明 |
| input:checked |
選擇所有選中的表單元素 |
|
| input:disabled |
選擇所有禁用的表單元素 |
|
| p:empty |
選擇所有沒有子元素的p元素 |
|
| input:enabled |
選擇所有啟用的表單元素 |
|
| p:first-of-type |
選擇每個父元素是p元素的第一個p子元素 |
|
| input:in-range |
選擇元素指定范圍內的值 |
|
| input:invalid |
選擇所有無效的元素 |
|
| p:last-child |
選擇所有p元素的最后一個子元素 |
|
| p:last-of-type |
選擇每個p元素是其母元素的最后一個p元素 |
|
| :not(p) |
選擇所有p以外的元素 |
|
| p:nth-child(2) |
選擇所有 p 元素的父元素的第二個子元素 |
|
| p:nth-last-child(2) |
選擇所有p元素倒數的第二個子元素 |
|
| p:nth-last-of-type(2) |
選擇所有p元素倒數的第二個為p的子元素 |
|
| p:nth-of-type(2) |
選擇所有p元素第二個為p的子元素 |
|
| p:only-of-type |
選擇所有僅有一個子元素為p的元素 |
|
| p:only-child |
選擇所有僅有一個子元素的p元素 |
|
| input:optional |
選擇沒有"required"的元素屬性 |
|
| input:out-of-range |
選擇指定范圍以外的值的元素屬性 |
|
| input:read-only |
選擇只讀屬性的元素屬性 |
|
| input:read-write |
選擇沒有只讀屬性的元素屬性 |
|
| input:required |
選擇有"required"屬性指定的元素屬性 |
|
| root |
選擇文檔的根元素 |
|
| #news:target |
選擇當前活動#news元素(點擊URL包含錨的名字) |
|
| input:valid |
選擇所有有效值的屬性 |
|
| a:link |
選擇所有未訪問鏈接 |
|
| a:visited |
選擇所有訪問過的鏈接 |
|
| a:active |
選擇正在活動鏈接 |
|
| a:hover |
把鼠標放在鏈接上的狀態 |
|
| input:focus |
選擇元素輸入后具有焦點 |
|
| p:first-letter |
選擇每個<p> 元素的第一個字母 |
|
| p:first-line |
選擇每個<p> 元素的第一行 |
|
| p:first-child |
選擇器匹配屬於任意元素的第一個子元素的 <p> 元素 |
|
| p:before |
在每個<p>元素之前插入內容 |
|
| p:after |
在每個<p>元素之后插入內容 |
|
| :lang(language) |
p:lang(it) |
為<p>元素的lang屬性選擇一個開始值 |