目录
1.CSS Selector
(1)原理
蓝色框里面的 .animal 就是 CSS Selector, 指定了class 值为animal的元素,要显示为红色。
![](https://img-blog.csdnimg.cn/c33bc6fd49c542fda00b19cd323a0bd9.bmp)
Selenium使用CSS Selector基本语法:
![](https://img-blog.csdnimg.cn/5c506bc823214002a6a187b2e05aaf8b.png)
(2)根据tag、id、class选择元素
①tag名
![](https://img-blog.csdnimg.cn/d4f586f1c92e45128801dba803e63fcc.png)
②id属性
在id号前面加上一个井号,
#id值
![](https://img-blog.csdnimg.cn/444edd1a81b14c1ba50a02f54c41eb16.png)
③class属性: 在 class 值 前面加上一个点,
.class值
(3)直接子元素和后代子元素关系
-
直接子元素:layer1、layer2是container的直接子元素
-
后代子元素:inner11、inner12是layer1直接子元素,但只是container后代子元素。container后代子元素包括layer1、layer2以及inner11~inner21, 因此后代子元素也包含直接子元素。
![](https://img-blog.csdnimg.cn/951d0758fd8942dba10df7cd5e0976d2.png)
-
层级语法关系:如果选择元素4,CSS selector语法为 "元素1 元素2 元素3 元素4",中间有一个或多个空格
![](https://img-blog.csdnimg.cn/182417d9c2cf40c2a786f359790872e4.png)
(4)根据属性选择
①固定值选择
![](https://img-blog.csdnimg.cn/0330415540fe432091de571163f3401c.png)
因此,selenium语法为
![](https://img-blog.csdnimg.cn/5654da2ae7224bcf9918a4b2d0c42ece.png)
②选择包含某个字符串
选择a节点,里面的href属性包含了 miitbeian 字符串:
![](https://img-blog.csdnimg.cn/be12484f788f4799b6a06487d6f7f414.png)
③以字符串开头
选择a节点,里面的href属性以 http 开头:
![](https://img-blog.csdnimg.cn/b4d42ce219dc4b63bdc5399dcb7b2898.png)
④以字符串结尾
![](https://img-blog.csdnimg.cn/1cfc6e54e7ce4ca283249a51f1091e72.png)
⑤同时搜索多个属性限制
对于某些标签可能有部分相同属性,可用
div[class=misc][ctype=gun] 限制多个属性
![](https://img-blog.csdnimg.cn/d84a1c2bf7f0488cbc7b5c798f4a9f6d.png)
(5)验证CSS Selector
如果直接运行代码验证CSS Selector成功非常麻烦,
![](https://img-blog.csdnimg.cn/562d449715d4452cbccfd8a3ae8d63df.png)
可在浏览器F12开发者工具中输入CSS Selector,判断是否成功定位元素,同理Xpath、CSS路径可以
![](https://img-blog.csdnimg.cn/2c08e9e8124c4249b53b2cf2166cea67.bmp)
2.CSS节点语法关系
(1)选择语法联合使用
图中语法可以用:
-
① div.footer1 > span.copyright:选择 一个class 属性值为 copyright 的 span 节点, 并且要求其 必须是 class 属性值为 footer1 的 div节点 的子节点
-
② .footer1 > .copyright:选择 一个class 属性值为copyright 的节点(不限类型), 并且要求其 必须是 class 属性值为 footer1 的节点的 子节点
-
③ .footer1 .copyright: 因为子元素同时也是后代元素
![](https://img-blog.csdnimg.cn/8d6c128ad0ea4fc9a3698e93022bce71.png)
(2)组选择
①同时选择所有
class 为 plant 和 class 为 animal 的元素,CSS选择器可使用
逗号
![](https://img-blog.csdnimg.cn/6a45bd961eef455ebd4dd2822474bfc5.png)
②同时选择所有
tag名为div的元素 和 id为BYHY的元素
![](https://img-blog.csdnimg.cn/6fd32a508bda410da7a73698edf48ce0.png)
③同时选择所有
id 为 t1 里面的 span 和 p 元素
![](https://img-blog.csdnimg.cn/a38ffe217bae4afd8f88e48ddc877c7c.png)
(3)按次序选择节点
html如下:
![](https://img-blog.csdnimg.cn/190fa281583e43dd82165469a948178b.png)
①父元素第n个节点
例如:选择 唐诗 和宋词 的第一个作者,即 第2个子元素,并且是span类型
-
限制节点类型: span:nth-child(2)
-
不限制节点类型: nth-child(2),即所有位置第2个元素
②父元素倒数第n个节点
-
nth-last-child方法:上述可写为 span:nth-last-child(9),倒数第9个即 顺序第2个
③父元素第几个某类型的子节点
-
nth-of-type: span:nth-of-type(1), 选择的是第1个span类型 的子元素
④父元素倒数第几个某类型的子节点
-
nth-last-of-type: span:nth-last-of-type(2)
⑤奇数节点和偶数节点
![](https://img-blog.csdnimg.cn/07d42babffc64c61a9a6be0a7a4eaf73.png)
(4) 兄弟节点选择
①相邻兄弟节点选择
要选择 唐诗 和宋词 的第一个 作者, 还有一种思考方法,就是选择 h3 唐诗和宋词后面紧跟着的兄弟节点 span
-
加号紧跟关系: h3 + span
②后续所有兄弟节点选择
选择 h3 后面所有的兄弟节点 span
-
~: h3 ~ span