前面我們看到了根據 id、class屬性、tag名 選擇元素。
如果我們要選擇的 元素 沒有id、class 屬性，或者有些我們不想選擇的元素 也有相同的 id、class屬性值，怎麼辦呢？
這時候我們通常可以通過 CSS selector 語法選擇元素。
CSS Selector 語法選擇元素原理
HTML中經常要 爲 某些元素 指定 顯示效果，比如 前景文字顏色是紅色， 背景顏色是黑色， 字體是微軟雅黑等。
那麼CSS必須告訴瀏覽器：要 選擇哪些元素 ， 來使用這樣的顯示風格。
比如 ，下圖中，爲什麼獅子老虎山羊會顯示爲紅色呢？
因爲藍色框裏面用css 樣式，指定了class 值爲animal的元素，要顯示爲紅色。
其中 藍色框裏面的 .animal 就是 CSS Selector ，或者說 CSS 選擇器。
CSS Selector 語法就是用來選擇元素的。
既然 CSS Selector 語法 天生就是瀏覽器用來選擇元素的，selenium自然就可以使用它用在自動化中，去選擇要操作的元素了。
只要 CSS Selector 的語法是正確的， Selenium 就可以選擇到該元素。
CSS Selector 非常強大，學習Selenium Web自動化一定要學習CSS Selector
通過 CSS Selector 選擇單個元素的方法是
find_element_by_css_selector(CSS Selector參數)
選擇所有元素的方法是
find_elements_by_css_selector(CSS Selector參數)
單個元素和所有元素的區別也是element多了一個s的事
CSS Selector 選擇元素非常靈活強大， 大家可以從下面的例子看出來。
根據 tag名、id、class 選擇元素
CSS Selector 同樣可以根據tag名、id 屬性和 class屬性 來 選擇元素，
根據 tag名 選擇元素的 CSS Selector 語法非常簡單，直接寫上tag名即可，
比如 要選擇 所有的tag名爲div的元素，就可以是這樣
elements = wd.find_elements_by_css_selector('div')
等價於
elements = wd.find_elements_by_tag_name('div')
根據id屬性 選擇元素的語法是在id號前面加上一個井號： #id值
比如 打開這個網址 http://f.python3.vip/webauto/sample1.html
有下面這樣的元素：
<input type="text" id='searchtext' />
就可以使用 #searchtext 這樣的 CSS Selector 來選擇它。
比如，我們想在 id 爲 searchtext 的輸入框中輸入文本 你好 ，完整的Python代碼如下
from selenium import webdriver
wd = webdriver.Chrome(r'd:\webdrivers\chromedriver.exe')
wd.get('http://f.python3.vip/webauto/sample1.html')
element = wd.find_element_by_css_selector('#searchtext')
element.send_keys('你好')
根據class屬性 選擇元素的語法是在 class 值 前面加上一個點： .class值
比如 這個網址 http://f.python3.vip/webauto/sample1.html
要選擇所有 class 屬性值爲 animal的元素 動物 除了這樣寫
elements = wd.find_elements_by_class_name('animal')
還可以這樣寫
elements = wd.find_elements_by_css_selector('.animal')
因爲是選擇 所有符合條件的 ，所以用 find_elements 而不是 find_element
選擇 子元素 和 後代元素
HTML中， 元素 內部可以 包含其他元素， 比如 下面的 HTML片段
<div id='container'>
<div id='layer1'>
<div id='inner11'>
<span>內層11</span>
</div>
<div id='inner12'>
<span>內層12</span>
</div>
</div>
<div id='layer2'>
<div id='inner21'>
<span>內層21</span>
</div>
</div>
</div>
下面的一段話有些繞口， 請 大家細心 閱讀：
id 爲 container 的div元素 包含了 id 爲 layer1 和 layer2 的兩個div元素。
這種包含是直接包含， 中間沒有其他的層次的元素了。 所以 id 爲 layer1 和 layer2 的兩個div元素 是 id 爲 container 的div元素 的 直接子元素
而 id 爲 layer1 的div元素 又包含了 id 爲 inner11 和 inner12 的兩個div元素。 中間沒有其他層次的元素，所以這種包含關係也是 直接子元素 關係
id 爲 layer2 的div元素 又包含了 id 爲 inner21 這個div元素。 這種包含關係也是 直接子元素 關係
而對於 id 爲 container 的div元素來說， id 爲 inner11 、inner12 、inner22 的元素 和 兩個 span類型的元素 都不是它的直接子元素， 因爲中間隔了幾層。
雖然不是直接子元素， 但是 它們還是在 container 的內部， 可以稱之爲它 的 後代元素
後代元素也包括了直接子元素， 比如 id 爲 layer1 和 layer2 的兩個div元素 也可以說 是 id 爲 container 的div元素 的 直接子元素，同時也是後代子元素
如果 元素2 是 元素1 的 直接子元素， CSS Selector 選擇子元素的語法是這樣的
元素1 > 元素2
中間用一個大於號 （我們可以理解爲箭頭號）
注意，最終選擇的元素是 元素2， 並且要求這個 元素2 是 元素1 的直接子元素
也支持更多層級的選擇， 比如
元素1 > 元素2 > 元素3 > 元素4
就是選擇 元素1 裏面的子元素 元素2 裏面的子元素 元素3 裏面的子元素 元素4 ， 最終選擇的元素是 元素4
如果 元素2 是 元素1 的 後代元素， CSS Selector 選擇後代元素的語法是這樣的
元素1 元素2
中間是一個或者多個空格隔開
最終選擇的元素是 元素2 ， 並且要求這個 元素2 是 元素1 的後代元素。
也支持更多層級的選擇， 比如
元素1 元素2 元素3 元素4
最終選擇的元素是 元素4
根據屬性選擇
id、class 都是web元素的 屬性 ，因爲它們是很常用的屬性，所以css選擇器專門提供了根據 id、class 選擇的語法。
那麼其他的屬性呢？
比如 <a href="http://www.miitbeian.gov.cn">蘇ICP備88885574號</a> 裏面根據 href選擇，可以用css 選擇器嗎？
當然可以！
css 選擇器支持通過任何屬性來選擇元素，語法是用一個方括號 [] 。
比如要選擇上面的a元素，就可以使用 [href="http://www.miitbeian.gov.cn"] 。這個表達式的意思是，選擇 屬性href值爲 http://www.miitbeian.gov.cn 的元素。
完整代碼如下
from selenium import webdriver
wd = webdriver.Chrome(r'e:\chromedriver.exe')
wd.get('http://f.python3.vip/webauto/sample1.html')
# 根據屬性選擇元素
element = wd.find_element_by_css_selector('[href="http://www.miitbeian.gov.cn"]')
# 打印出元素對應的html
print(element.get_attribute('outerHTML'))
當然，前面可以加上標籤名的限制，比如 div[class='SKnet'] 表示 選擇所有 標籤名爲div，且class屬性值爲SKnet的元素。
屬性值用單引號，雙引號都可以。
根據屬性選擇，還可以不指定屬性值，比如 [href] ， 表示選擇 所有具有屬性名爲href 的元素，不管它們的值是什麼。
CSS 還可以選擇 屬性值 包含 某個字符串 的元素
比如， 要選擇a節點，裏面的href屬性包含了 miitbeian 字符串，就可以這樣寫
a[href*="miitbeian"]
還可以 選擇 屬性值 以某個字符串 開頭 的元素
比如， 要選擇a節點，裏面的href屬性以 http 開頭 ，就可以這樣寫
a[href^="http"]
還可以 選擇 屬性值 以某個字符串 結尾 的元素
比如， 要選擇a節點，裏面的href屬性以 gov.cn 結尾 ，就可以這樣寫
a[href$="gov.cn"]
如果一個元素具有多個屬性
<div class="misc" ctype="gun">沙漠之鷹</div>
CSS 選擇器 可以指定 選擇的元素要 同時具有多個屬性的限制，像這樣 div[class=misc][ctype=gun]
驗證 CSS Selector
那麼我們怎麼驗證 CSS Selector 的語法是否正確選擇了我們要選擇的元素呢？
當然可以像下面這樣，寫出Python代碼，運行看看，能否操作成功
element = wd.find_element_by_css_selector('#searchtext')
element.input('輸入的文本')
如果成功，說明選擇元素的語法是正確的。
但是這樣做的問題就是：太麻煩了。
當我們進行自動化開發的時候，有大量選擇元素的語句，都要這樣一個個的驗證，就非常耗時間。
由於 CSS Selector 是瀏覽器直接支持的，可以在瀏覽器 開發者工具欄 中驗證。
比如我們使用Chrome瀏覽器打開 http://f.python3.vip/webauto/sample1.html
按F12 打開 開發者工具欄
如果我們要驗證 下面的表達式
#bottom > .footer2 a
能否選中 這個元素
<a href="http://www.miitbeian.gov.cn">蘇ICP備88885574號</a>
可以這樣做：
點擊 Elements 標籤後， 同時按 Ctrl 鍵 和 F 鍵， 就會出現下圖箭頭處的 搜索框
我們可以在裏面輸入任何 CSS Selector 表達式 ，如果能選擇到元素， 右邊的的紅色方框裏面就會顯示出類似 2 of 3 這樣的內容。
of 後面的數字表示這樣的表達式 總共選擇到幾個元素
of 前面的數字表示當前黃色高亮顯示的是 其中第幾個元素
上圖中的 1 of 1 就是指 ： CSS 選擇語法 #bottom > .footer2 a
在當前網頁上共選擇到 1 個元素， 目前高亮顯示的是第1個。
如果我們輸入 .plant 就會發現，可以選擇到3個元素
