無處不在的CSS定位——詳解CSS定位在各種語言中的使用

小編在做selenium文檔的整理的時候，發(fā)現(xiàn)selenium中有一個定位方式叫做CSS定位，今天我們就CSS定位為展開，來討論一下這種定位方式究竟在哪些地方有使用吧。

在CSS文件中

我們要介紹的這種定位方式名叫css定位，所以根本上本來就屬于CSS技術(shù)的范疇。我們知道CSS的基礎(chǔ)語法是這樣的：

?選擇器{樣式代碼；樣式代碼}?

例如:

.content p.nowrap{
    disblock:none;
    background-color:yellow;
}

我們知道，一個html文件中，可能具有相同情況的標(biāo)簽是存在的。所以前端開發(fā)工程師在寫前端頁面的時候，會盡量避免選擇器的重復(fù)。他們通過對選擇器的重重設(shè)置，讓每個選擇器盡量對應(yīng)一個標(biāo)簽（當(dāng)然了，前端開發(fā)工作者更希望樣式能復(fù)用）。

作為前端的技術(shù)，CSS選擇器的這種思路，給了其他語言一個良好的思路，比如接下來的JavaScript。

在JavaScript中

在JavaScript對DOM進(jìn)行操作的過程中，很多小伙伴會感到操作力不從心。原因很簡單，不是所有的html元素都有id屬性，而其它getElement方法也都有對應(yīng)的缺陷（一次取很多個對象，使用不便）。但實際上，JavaScript提供了兩個比較好用的方法——querySelector() 和querySelectorAll() 。querySelector() 方法返回匹配指定 CSS 選擇器元素的第一個子元素 。 該方法只返回匹配指定選擇器的第一個元素。 querySelectorAll() 方法則能一次返回所有匹配元素。

注意：在上文中，我們提到了CSS選擇器。沒錯，這兩種方法要傳入的對象，就是CSS的選擇器。以上面的CSS代碼為例，我們要找到這段CSS代碼渲染的那個元素，則用如下方法：

?var el = querySelector(".content p.nowrap");?

該方法返回一個el對象。如果渲染的標(biāo)簽不止一個，我們要獲取到所有元素，可以使用如下方法：

?var el = querySelectorAll(".content p.nowrap");?

該方法返回一個el對象數(shù)組。

在jQuery中

jQuery作為JavaScript的函數(shù)庫，它也能使用上述的JavaScript方法，只不過它的使用方法略有不同。

?var el = $(".content p.nowrap");
?

在selenium中

在selenium中，也可以用CSS的方式來定位html上的元素（不過與JavaScript目的不同，selenium定位元素的目的是為了操作這個元素以實現(xiàn)自動化操作的目的）。selenium有多種語言支持，以python為例，python selenium進(jìn)行CSS定位的代碼如下：

??content = driver.find_element_by_css_selector('.content p.nowrap')??

另外，selenium還提供了By類來進(jìn)行定位，這種方法python和java都可以使用。

?driver.find_elements(By. CSS_SELECTOR,'.content p.nowrap')?

小結(jié)

不難發(fā)現(xiàn)，在selenium css定位中,jquery使用css選擇器來選取元素中和JavaScript的queryselector選擇器中，傳入的數(shù)據(jù)都是css的選擇器。所以這種定位被稱為CSS定位也是合情合理的。通過以上的介紹，各位讀者了解到了如何使用CSS定位了嗎？

關(guān)注W3C技術(shù)頭條，每天帶你學(xué)點不一樣的小知識！