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

2021-06-23 10:37:26 浏览数 (3)

小编在做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技术头条,每天带你学点不一样的小知识!


0 人点赞