Css_selector是什麼

　　CSS是一個被用來描述如何在螢幕等處渲染HTML和XML文件的語言。CSS使用選擇器來為文件中的元素繫結樣式屬性。

　　選擇器（selector）是用來在樹中匹配元素的模式，選擇器對HTML和XML進行了優化，被設計用來在注重效能的程式碼中執行。Selenium官網的Document裡極力推薦使用Css_selector，而不是XPath來定位元素。

Css_selector常用如下6種定位元素的方法（不支援文字定位）

1、通過絕對路徑定位

　　絕對路徑是從網頁的根節點html開始，逐層去查詢需要定位的元素。

　　此方法缺點顯而易見，當頁面元素位置發生改變時，都需要修改，因此，並不推薦使用。

程式碼如下：

以百度首頁搜尋框為例

import os
from selenium import webdriver
from selenium.webdriver.common.by import By

current_path = os.path.dirname(os.path.abspath(__file__))  # 當前路徑
driver_path = os.path.join(current_path,'../webdriver/chromedriver.exe')  # driver路徑
driver = webdriver.Chrome(executable_path=driver_path)  #
 
 Firefox,Ie等

driver.get('https://www.baidu.com/')  # 開啟網站
# 絕對路徑定位
# 以html body為開頭，使用空格分開層次結構 遇到id使用# 遇到class使用.
driver.find_element(By.CSS_SELECTOR,'html body div#wrapper.wrapper_new div#head div#head_wrapper.head_wrapper.s-isindex-wrap.nologin div.s_form.s_form_nologin div.s_form_wrapper.soutu-env-nomac.soutu-env-index form#form.fm span.bg.s_ipt_wr.new-pmd.quickdelete-wrap input#kw.s_ipt
 
').send_keys('python')

備註：當同一層次有多個相同的元素時，使用id或class區分，遇到id用#號，遇到class用.號

2、通過相對路定位

　　相對路徑表示檔案中所有符合模式的元素都會被選出來，即使是處於樹中不同的層級也會被選出來。

程式碼如下：

以百度首頁搜尋框為例

import os
from selenium import webdriver
from selenium.webdriver.common.by import By

current_path = os.path.dirname(os.path.abspath(__file__))  # 當前路徑
driver_path = os.path.join(current_path,'../webdriver/chromedriver.exe')  # driver路徑
driver = webdriver.Chrome(executable_path=driver_path)  # Firefox,Ie等

driver.get('https://www.baidu.com/')  # 開啟網站
# 相對路徑定位
driver.find_element(By.CSS_SELECTOR,'input#kw').send_keys('python')
driver.find_element(By.CSS_SELECTOR,'span input#kw').send_keys('python')

備註：以上都可以定位到百度搜索框，相對路徑的長度和開始位置並不受限制，可以採用從後往前逐層定位直到定位到即可的方式去定位。

3、使用元素屬性定位

　　元素屬性定位要求屬效能夠定位到唯一一個元素，如果存在多個相同條件的標籤，預設定位第一個；

具體格式：標籤名[屬性="屬性值"]

支援使用多個屬性一起定位元素：標籤名[屬性1="屬性值1"][屬性2="屬性值2"]

程式碼如下：

以百度首頁搜尋框為例

import os
from selenium import webdriver
from selenium.webdriver.common.by import By

current_path = os.path.dirname(os.path.abspath(__file__))  # 當前路徑
driver_path = os.path.join(current_path,'../webdriver/chromedriver.exe')  # driver路徑
driver = webdriver.Chrome(executable_path=driver_path)  # Firefox,Ie等

driver.get('https://www.baidu.com/')  # 開啟網站
# 元素屬性定位
# 語法格式：標籤名[屬性名="屬性值"]  標籤名[屬性名1="屬性值1"][屬性名2="屬性值2"]
driver.find_element(By.CSS_SELECTOR,'input[maxlength="255"]').send_keys('python')
driver.find_element(By.CSS_SELECTOR,'input[maxlength="255"][name="wd"]').send_keys('python')

4、使用部分屬性值匹配（也稱為模糊方法定位）

　　屬性值如果太長或網頁中的元素屬性動態變化，可以使用此方法

元素屬性值比對字串開頭：^=

元素屬性值比對字串結尾：$=

元素屬性值比對字串包含：*=

程式碼如下：

以百度首頁的連結為例

import os
from selenium import webdriver
from selenium.webdriver.common.by import By

current_path = os.path.dirname(os.path.abspath(__file__))  # 當前路徑
driver_path = os.path.join(current_path,'../webdriver/chromedriver.exe')  # driver路徑
driver = webdriver.Chrome(executable_path=driver_path)  # Firefox,Ie等

driver.get('https://www.baidu.com/')  # 開啟網站
# 部分屬性值定位
# ^=比對字串開始  *= 比對字串包含  $= 比對字串結尾
driver.find_element(By.CSS_SELECTOR,'a[href^="https://haokan"]').click()
driver.find_element(By.CSS_SELECTOR,'a[href*="haokan"]').click()
driver.find_element(By.CSS_SELECTOR,'a[href$="sfrom=baidu-top"]').click()

5、查詢子元素

1）子元素 A>B
driver.find_element(By.CSS_SELECTOR,'form>span>input')

2）後代元素 A空格B（類似>）
driver.find_element(By.CSS_SELECTOR,'form span input')

3）第一個後代元素:first-child
driver.find_element(By.CSS_SELECTOR,'form input:first-child')

4）最後一個後代元素:last-child
driver.find_element(By.CSS_SELECTOR,'form input:last-child')

5）第n個子元素:nth-child(N)[類同:nth-of-type(N)]
driver.find_element(By.CSS_SELECTOR,'form input:nth-child(5)')

driver.find_element(By.CSS_SELECTOR,'form input:nth-of-type(15)')

程式碼如下：

以百度首頁為例

import os
from selenium import webdriver
from selenium.webdriver.common.by import By

current_path = os.path.dirname(os.path.abspath(__file__))  # 當前路徑
driver_path = os.path.join(current_path,'../webdriver/chromedriver.exe')  # driver路徑
driver = webdriver.Chrome(executable_path=driver_path)  # Firefox,Ie等

driver.get('https://www.baidu.com/')  # 開啟網站
# 查詢子元素
# >表示子元素
driver.find_element(By.CSS_SELECTOR,'form>span>input').send_keys('python')
# 空格表示後代元素(類似>)
driver.find_element(By.CSS_SELECTOR,'form span input').send_keys('python')
# 第一個後代元素 :first-child
a = driver.find_element(By.CSS_SELECTOR,'form  input:first-child').get_attribute('name')
print( a )  # ie
# 最後一個後代元素 :last-child   如果是兒子/孫子都存在，是孫子在最後面一個
b = driver.find_element(By.CSS_SELECTOR,'form  input:last-child').get_attribute('value')
print( b )  # 百度一下
# 第N個子元素  :nth-child(N)等同於:nth-of-type(N)
c = driver.find_element(By.CSS_SELECTOR,'form input:nth-child(5)').get_attribute('name')
d = driver.find_element(By.CSS_SELECTOR,'form input:nth-of-type(15)').get_attribute('name')
print( c )    # ch
print( d )    # rsv_dl

6、查詢兄弟元素

1）同層級下一個元素 +
driver.find_element(By.CSS_SELECTOR,'div#s-top-left a')
driver.find_element(By.CSS_SELECTOR,'div#s-top-left a+a+a')

2）選擇同層級多個相同標籤的元素 ~
driver.find_elements(By.CSS_SELECTOR,'div#s-top-left a~a')

程式碼如下：

以百度首頁為例

import os
from selenium import webdriver
from selenium.webdriver.common.by import By

current_path = os.path.dirname(os.path.abspath(__file__))  # 當前路徑
driver_path = os.path.join(current_path,'../webdriver/chromedriver.exe')  # driver路徑
driver = webdriver.Chrome(executable_path=driver_path)  # Firefox,Ie等

driver.get('https://www.baidu.com/')  # 開啟網站
# 兄弟元素
# 同層級下一個元素 +
driver.find_element(By.CSS_SELECTOR,'div#s-top-left a').click()  # 新聞
driver.find_element(By.CSS_SELECTOR,'div#s-top-left a+a+a').click()  # 地圖
# 選擇同層級多個相同標籤的元素 ~
s = driver.find_elements(By.CSS_SELECTOR,'div#s-top-left a~a')
s[0].click()  # hao123

備註：+號可以多次使用 ，～號一般返回的是多個元素，要用find_elements接收

備註：+號可以多次使用～號一般返回的是多個元素，要用find_elements接收