1. CSS選擇器
前面我們學習了根據 id、class屬性、tag名選擇元素。
如果我們要選擇的元素沒有id、class 屬性，或者有些我們不想選擇的元素也有相同的id、class屬性值，怎么辦呢？
這時候我們通常可以通過CSS selector語法選擇元素。
1.1 CSS Selector語法選擇元素原理
HTML中經常要為某些元素指定顯示效果，比如前景文字顏色是紅色，背景顏色是黑色，字體是微軟雅黑等。
那么CSS必須告訴瀏覽器：要選擇哪些元素，來使用這樣的顯示風格。
比如，下圖中，為什么灰太狼紅太狼小灰灰會顯示為紅色呢？
html代碼：
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .wolf{ color: red; } </style> </head> <body> <div class="raise"><span>喜羊羊</span></div> <div class="raise"><span>美羊羊</span></div> <div class="raise"><span>暖羊羊</span></div> <div class="wolf"><span>灰太狼</span></div> <div class="wolf"><span>紅太狼</span></div> <div class="wolf"><span>小灰灰</span></div> </body>
因為藍色框里面用css 樣式，指定了class值為wolf的元素，要顯示為紅色。
其中藍色框里面的.wolf就是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參數)
CSS Selector選擇元素非常靈活強大，大家可以從下面的例子看出來。
1.2 根據tag名、id、class選擇元素
CSS Selector同樣可以根據tag名、id 屬性和class屬性來選擇元素。
1.2.1 根據tag名選擇元素
根據tag名選擇元素的CSS Selector語法非常簡單，直接寫上tag名即可。
比如要選擇所有的tag名為div的元素，就可以是這樣：
elements = wd.find_elements_by_css_selector('div')
等價於
elements = wd.find_elements_by_tag_name('div')
1.2.2 根據id屬性選擇元素
根據id屬性選擇元素的語法是在id號前面加上一個井號：#id值
下面這樣的元素：
<input type="text" id='searchtext' />
就可以使用#searchtext這樣的CSS Selector來選擇它。
比如，我們想在id為searchtext的輸入框中輸入文本 你好，完整的Python代碼如下：
from selenium import webdriver wd = webdriver.Chrome(r'E:\webdrivers\chromedriver.exe') wd.get('http://127.0.0.1:8020/day01/index.html') element = wd.find_element_by_css_selector('#searchtext') element.send_keys('你好')
1.2.3 根據class屬性選擇元素
根據class屬性 選擇元素的語法是在 class 值 前面加上一個點：.class值
要選擇所有class屬性值為wolf的元素狼除了這樣寫：
elements = wd.find_elements_by_class_name('wolf')
還可以這樣寫：
elements = wd.find_elements_by_css_selector('.wolf')
因為是選擇所有符合條件的，所以用find_elements而不是find_element。
1.3 選擇子元素和后代元素
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.
1.4 根據屬性選擇
id、class 都是web元素的屬性，因為它們是很常用的屬性，所以css選擇器專門提供了根據 id、class 選擇的語法。
那么其他的屬性呢？
比如
<a href="https://www.cnblogs.com/liuhui0308/">愛編程的小灰灰</a>
里面根據href選擇，可以用css選擇器嗎？
當然可以！
css選擇器支持通過任何屬性來選擇元素，語法是用一個方括號[]。
比如要選擇上面的a元素，就可以使用
[href="https://www.cnblogs.com/liuhui0308/"]
這個表達式的意思是，選擇屬性href值為https://www.cnblogs.com/liuhui0308/的元素。
完整代碼如下：
from selenium import webdriver wd = webdriver.Chrome(r'E:\webdrivers\chromedriver.exe') wd.get('http://127.0.0.1:8020/day01/index.html') # 根據屬性選擇元素 element = wd.find_element_by_css_selector('[href="https://www.cnblogs.com/liuhui0308/"]') # 打印出元素對應的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]
1.5 驗證CSS Selector
那么我們怎么驗證CSS Selector的語法是否正確選擇了我們要選擇的元素呢？
當然可以像下面這樣，寫出Python代碼，運行看看，能否操作成功。
element = wd.find_element_by_css_selector('#searchtext') element.input('輸入的文本')
如果成功，說明選擇元素的語法是正確的。
但是這樣做太麻煩了，浪費了很多的時間。
當我們進行自動化開發的時候，有大量選擇元素的語句，都要這樣一個個的驗證，就非常浪費時間。
由於CSS Selector是瀏覽器直接支持的，可以在瀏覽器開發者工具欄中驗證。
我們可以打開一個網站，按F12打開開發者工具欄。
如果我們要驗證下面的表達式
#bottom > .footer2 a
能否選中這個元素
<a href="https://www.cnblogs.com/liuhui0308/">愛編程的小灰灰</a>
html代碼：
<div id='bottom'> <div class='footer1'> <span class='copyright'>版權</span> <span class='date'>發布日期：2019-11-26</span> </div> <div class='footer2'> <span>主頁 <a href="https://www.cnblogs.com/liuhui0308/">愛編程的小灰灰</a> </span> </div> </div>
可以這樣做：
點擊Elements標簽后，同時按Ctrl鍵和F鍵，就會出現下圖箭頭處的搜索框：
我們可以在里面輸入任何CSS Selector表達式，如果能選擇到元素，右邊的的紅色方框里面就會顯示出類似1 of 1這樣的內容。
of后面的數字表示這樣的表達式總共選擇到幾個元素
of前面的數字表示當前黃色高亮顯示的是其中第幾個元素
上圖中的1 of 1 就是指：CSS選擇語法 #bottom > .footer2 a在當前網頁上共選擇到一個元素，沒錢高亮顯示的是第1個。
如果我們輸入span就會發現，可以選擇到3個元素
