无处不在的CSS定位——详解CSS定位在各种语言中的使用

小编在做selenium文档的整理的时候，发现selenium中有一个定位方式叫做CSS定位，今天我们就CSS定位为展开，来讨论一下这种定位方式究竟在哪些地方有使用吧。

在CSS文件中

我们要介绍的这种定位方式名叫css定位，所以根本上本来就属于CSS技术的范畴。我们知道CSS的基础语法是这样的：

​选择器{样式代码；样式代码}​

例如:

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

我们知道，一个html文件中，可能具有相同情况的标签是存在的。所以前端开发工程师在写前端页面的时候，会尽量避免选择器的重复。他们通过对选择器的重重设置，让每个选择器尽量对应一个标签（当然了，前端开发工作者更希望样式能复用）。

作为前端的技术，CSS选择器的这种思路，给了其他语言一个良好的思路，比如接下来的JavaScript。

在JavaScript中

在JavaScript对DOM进行操作的过程中，很多小伙伴会感到操作力不从心。原因很简单，不是所有的html元素都有id属性，而其它getElement方法也都有对应的缺陷（一次取很多个对象，使用不便）。但实际上，JavaScript提供了两个比较好用的方法——querySelector() 和querySelectorAll() 。querySelector() 方法返回匹配指定 CSS 选择器元素的第一个子元素 。 该方法只返回匹配指定选择器的第一个元素。 querySelectorAll() 方法则能一次返回所有匹配元素。

注意：在上文中，我们提到了CSS选择器。没错，这两种方法要传入的对象，就是CSS的选择器。以上面的CSS代码为例，我们要找到这段CSS代码渲染的那个元素，则用如下方法：

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

该方法返回一个el对象。如果渲染的标签不止一个，我们要获取到所有元素，可以使用如下方法：

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

该方法返回一个el对象数组。

在jQuery中

jQuery作为JavaScript的函数库，它也能使用上述的JavaScript方法，只不过它的使用方法略有不同。

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

在selenium中

在selenium中，也可以用CSS的方式来定位html上的元素（不过与JavaScript目的不同，selenium定位元素的目的是为了操作这个元素以实现自动化操作的目的）。selenium有多种语言支持，以python为例，python selenium进行CSS定位的代码如下：

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

另外，selenium还提供了By类来进行定位，这种方法python和java都可以使用。

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

小结

不难发现，在selenium css定位中,jquery使用css选择器来选取元素中和JavaScript的queryselector选择器中，传入的数据都是css的选择器。所以这种定位被称为CSS定位也是合情合理的。通过以上的介绍，各位读者了解到了如何使用CSS定位了吗？

关注W3C技术头条，每天带你学点不一样的小知识！