小編在做selenium文檔的整理的時(shí)候，發(fā)現(xiàn)selenium中有一個(gè)定位方式叫做CSS定位，今天我們就CSS定位為展開，來(lái)討論一下這種定位方式究竟在哪些地方有使用吧。
在CSS文件中
我們要介紹的這種定位方式名叫css定位，所以根本上本來(lái)就屬于CSS技術(shù)的范疇。我們知道CSS的基礎(chǔ)語(yǔ)法是這樣的：
?選擇器{樣式代碼；樣式代碼}?
例如:
.content p.nowrap{
disblock:none;
background-color:yellow;
}我們知道，一個(gè)html文件中，可能具有相同情況的標(biāo)簽是存在的。所以前端開發(fā)工程師在寫前端頁(yè)面的時(shí)候，會(huì)盡量避免選擇器的重復(fù)。他們通過(guò)對(duì)選擇器的重重設(shè)置，讓每個(gè)選擇器盡量對(duì)應(yīng)一個(gè)標(biāo)簽（當(dāng)然了，前端開發(fā)工作者更希望樣式能復(fù)用）。
作為前端的技術(shù)，CSS選擇器的這種思路，給了其他語(yǔ)言一個(gè)良好的思路，比如接下來(lái)的JavaScript。
在JavaScript中
在JavaScript對(duì)DOM進(jìn)行操作的過(guò)程中，很多小伙伴會(huì)感到操作力不從心。原因很簡(jiǎn)單，不是所有的html元素都有id屬性，而其它getElement方法也都有對(duì)應(yīng)的缺陷（一次取很多個(gè)對(duì)象，使用不便）。但實(shí)際上，JavaScript提供了兩個(gè)比較好用的方法——querySelector() 和querySelectorAll() 。querySelector() 方法返回匹配指定 CSS 選擇器元素的第一個(gè)子元素 。 該方法只返回匹配指定選擇器的第一個(gè)元素。 querySelectorAll() 方法則能一次返回所有匹配元素。
注意：在上文中，我們提到了CSS選擇器。沒(méi)錯(cuò)，這兩種方法要傳入的對(duì)象，就是CSS的選擇器。以上面的CSS代碼為例，我們要找到這段CSS代碼渲染的那個(gè)元素，則用如下方法：
?var el = querySelector(".content p.nowrap");?
該方法返回一個(gè)el對(duì)象。如果渲染的標(biāo)簽不止一個(gè)，我們要獲取到所有元素，可以使用如下方法：
?var el = querySelectorAll(".content p.nowrap");?
該方法返回一個(gè)el對(duì)象數(shù)組。
在jQuery中
jQuery作為JavaScript的函數(shù)庫(kù)，它也能使用上述的JavaScript方法，只不過(guò)它的使用方法略有不同。
?var el = $(".content p.nowrap");?
在selenium中
在selenium中，也可以用CSS的方式來(lái)定位html上的元素（不過(guò)與JavaScript目的不同，selenium定位元素的目的是為了操作這個(gè)元素以實(shí)現(xiàn)自動(dòng)化操作的目的）。selenium有多種語(yǔ)言支持，以python為例，python selenium進(jìn)行CSS定位的代碼如下：
??content = driver.find_element_by_css_selector('.content p.nowrap')??
另外，selenium還提供了By類來(lái)進(jìn)行定位，這種方法python和java都可以使用。
?driver.find_elements(By. CSS_SELECTOR,'.content p.nowrap')?
小結(jié)
不難發(fā)現(xiàn)，在selenium css定位中,jquery使用css選擇器來(lái)選取元素中和JavaScript的queryselector選擇器中，傳入的數(shù)據(jù)都是css的選擇器。所以這種定位被稱為CSS定位也是合情合理的。通過(guò)以上的介紹，各位讀者了解到了如何使用CSS定位了嗎？
關(guān)注W3C技術(shù)頭條，每天帶你學(xué)點(diǎn)不一樣的小知識(shí)！
