1. CSS选择器

1.1 选择语法联合使用

CSS selector的另一个强大之处在于:选择语法可以联合使用。

html代码:

<div id='bottom'>
<div class='footer1'>
<span class='copyright'>版权</span>
<span class='date'>发布日期:2019-11-26</span>
</div>
<div class='footer2'>
<span>主页
<a href="https://www.cnblogs.com/liuhui0308/">爱编程的小灰灰</a>
</span>
</div>
</div>

比如,我们要选择网页html中的元素

<span class='copyright'>版权</span>

CSS selector表达式可以这样写:

div.footer1 > span.copyright

就是选择一个class属性值为copyright的span节点,并且要求其必须是class属性值为footer1的div节点 的子节点。

也可以更简单:

.footer1 > .copyright

就是选择一个class属性值为copyright的节点(不限类型),并且要求其必须是class属性值为footer1的节点的子节点。

当然这样也是可以的:

.footer1  .copyright

因为子元素同时也是后代元素。

1.2 组选择

如果我们要同时选择所有class为plantclass为animal的元素。怎么办?

这种情况,css选择器可以使用逗号,称之为组选择,像这样:

.raise , .wolf

再比如,我们要同时选择所有tag名为div的元素和id为BYHY的元素,就可以像这样写

div,#BYHY

对应的selenium代码如下:

elements = wd.find_elements_by_css_selector('div,#BYHY')
for element in elements:
print(element.text)

我们再看一个例子:

html代码:

<div id='t1'>
<h3> 唐诗 </h3>
<span>李白</span>
<p>静夜思</p>
<span>杜甫</span>
<p>春夜喜雨</p>
</div> <div id='t2'>
<h3> 宋词 </h3>
<span>辛弃疾</span>
<p>北固亭怀古</p>
</div>

我们要选择所有唐诗里面的作者和诗名,也就是选择所有id为t1里面的span和p元素。

我们是不是应该这样写呢?

#t1 > span,p

这样是不行的,这样写的意思是选择所有id为t1里面的span和所有的p元素。

只能这样写:

#t1 > span , #t1 > p

1.3 按次序选择子节点

html代码:

<div id='t1'>
<h3> 唐诗 </h3>
<span>李白</span>
<p>静夜思</p>
<span>杜甫</span>
<p>春夜喜雨</p>
</div> <div id='t2'>
<h3> 宋词 </h3>
<span>苏轼</span>
<p>赤壁怀古</p>
<p>明月几时有</p>
<p>江城子·乙卯正月二十日夜记梦</p>
<p>蝶恋花·春景</p>
<span>辛弃疾</span>
<p>京口北固亭怀古</p>
<p>青玉案·元夕</p>
<p>西江月·夜行黄沙道中</p>
</div>

1.3.1 父元素的第n个子节点

我们可以指定选择的元素是父元素的第几个子节点,使用nth-child。

比如:

我们要选择唐诗和宋词的第一个作者,

也就是说选择的是第2个子元素,并且是span类型

所以这样可以这样写:

span:nth-child(2)

如果你不加节点类型限制,直接这样写:

:nth-child(2)

就是选择所有位置为第2个的所有元素,不管是什么类型。

1.3.2 父元素的倒数第n个子节点

也可以反过来,选择的是父元素的倒数第n个子节点,使用nth-last-child。

比如:

p:nth-last-child(1)

就是选择第倒数第1个子元素,并且是p元素。

1.3.3 父元素的第几个某类型的子节点

我们可以指定选择的元素是父元素的第几个某类型的子节点,使用nth-of-type。

比如:

我们要选择唐诗和宋词的第一个作者,可以像上面那样思考:选择的是第2个子元素,并且是span类型。

所以可以这样写:

span:nth-child(2)

还可以这样思考,选择的是第1个span类型的子元素。

所以也可以这样写:

span-nth-of-type(1)

1.3.4 父元素的倒数第几个某类型的子节点

当然也可以反过来,选择父元素的倒数第几个某类型的子节点,使用nth-last-of-type。

比如:

p:nth-last-of-type(2)

1.3.5 奇数节点和偶数节点

如果要选择的是父元素的偶数节点,使用nth-child(even)。

比如:

p:nth-child(even)

如果要选择的是父元素的奇数节点,使用nth-child(odd)

p:nth-child(odd)

如果要选择的是父元素的某类型偶数节点,使用nth-of-type(even)。

如果要选择的是父元素的某类型奇数节点,使用nth-of-type(odd)。

1.4 兄弟节点选择

1.4.1 相邻兄弟节点选择

上面的例子里面,我们要选择唐诗和宋词 的第一个作者

还有一种思考方法,就是选择h3后面紧跟着的兄弟节点span。

这就是一种相邻兄弟关系,可以这样写h3+span。

表示元素紧跟关系的是加号。

1.4.2 后续所有兄弟节点选择

如果要选择是选择h3后面所有的兄弟节点span,可以这样写h3 ~ span。

Selenium(五):CSS选择器(二)的更多相关文章

  1. selenium中CSS选择器定位

    selenium元素定位,CSS选择器定位效率会高很多. CSS选择器用于选择你想要的元素的样式的模式.表格摘自“菜鸟教程”,具体用法可去查阅 选择器 示例 示例说明 CSS .class .intr ...

  2. css 选择器二

    2.4 盒模型 2.4.1 定义 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型 ...

  3. Scrapy基础(五) ------css选择器基础

    基本语法: *                  选择所有节点#container         选择id为container的节点.container      选择所有class包含contai ...

  4. CSS的引入方式及CSS选择器

    一 CSS介绍 现在的互联网前端分三层: a.HTML:超文本标记语言.从语义的角度描述页面结构. b.CSS:层叠样式表.从审美的角度负责页面样式. c.JS:JavaScript .从交互的角度描 ...

  5. 01--CSS的引入方式及CSS选择器

    一 CSS介绍 现在的互联网前端分三层: a.HTML:超文本标记语言.从语义的角度描述页面结构. b.CSS:层叠样式表.从审美的角度负责页面样式. c.JS:JavaScript .从交互的角度描 ...

  6. day 42 01--CSS的引入方式及CSS选择器

    01--CSS的引入方式及CSS选择器   本节目录 一 CSS介绍 二 行内样式 三 内接样式 四 外接样式 五 CSS的选择器 六 CSS的高级选择器 七 CSS的属性选择器 八 CSS的伪类选择 ...

  7. Selenium系列(十二) - 自动化必备知识之CSS选择器的详细使用

    如果你还想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识, ...

  8. 最常用的五类CSS选择器

    一些新手朋友对选择器一知半解,不知道在什么情况下运用什么样的选择器,这是一个比较头疼的问题,针对新手朋友,对CSS选择器作一些简单的说明,希望能对大家的学习工作有一定的帮助,更多的CSS知识请参考We ...

  9. 还需要学习的十二种CSS选择器

    在前面的文章中,我们在介绍了<五种你必须彻底了解的CSS选择器>,现在向大家介绍,还需要学习的另外十二种CSS选择器.如果你还没有用过,就好好学习一下,如果你已经熟知了就当是温习. 一.X ...

随机推荐

  1. three.js 制作太阳系统

    最近学了three.js,想拿来练练手,喜欢宇宙,于是亲手撸代码来完成这个,为了更真实,于是查了一些相关资料.1. 距离太阳由近及远分别是[水星,金星,地球,火星,木星,土星,天王星,海王星]2. 他 ...

  2. Winform中实现自定义屏保效果(附代码下载)

    场景 效果 注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 新建form ...

  3. leetcode之缺失的第一个正数

    给定一个未排序的整数数组,找出其中没有出现的最小的正整数. 示例 1: 输入: [1,2,0]输出: 3示例 2: 输入: [3,4,-1,1]输出: 2示例 3: 输入: [7,8,9,11,12] ...

  4. JavaScript 基于HTML5 canvas 获取文本占用的像素宽度

    基于HTML5 canvas 获取文本占用的像素宽度   by:授客 QQ:1033553122 直接上代码   // 获取单行文本的像素宽度 getTextPixelWith(text, fontS ...

  5. 计划任务cron

    cron 计划任务 作用: 计划任务主要是做一些周期性的任务,目前最主要的用途是定期备份数据 Schedule one-time tasks with at. 一次性调度执行 atSchedule r ...

  6. Netty面试题和解答(一)

    基础 TCP和UDP的区别? TCP是面向连接的(在客户端和服务器之间传输数据之前要先建立连接),UDP是无连接的(发送数据之前不需要先建立连接) TCP提供可靠的服务(通过TCP传输的数据.无差错, ...

  7. 收到一个神盾局的offer,怎么样?

    漫威十一年系列总结性的电影<复联4>正在热映,而衍生出的一部和漫威宇宙关联的美剧<神盾局特工>,今年我也在陆陆续续地看.一开始预期的是一部特工加一些科幻或魔幻元素的剧集,就图看 ...

  8. Python 的 Geth 封装库 PyGeth

    PyGeth 是一个 Python 封装库,用来作为子进程运行 geth. 系统依赖 该库需要 geth 可执行文件. 安装 pip install py-geth 快速启动 运行连接到 mainne ...

  9. opencv检测图像直线

    #include<opencv2/opencv.hpp> #include<iostream> using namespace std; using namespace cv; ...

  10. 基于MbedTLS的AES加密实现,含STM32H7和STM32F4的实现例程

    说明: 1.mbedTLS的前身是PolarSSL,开源免费. 主要提供了的SSL/TLS支持(在传输层对网络进行加密),各种加密算法,各种哈希算法,随机数生成以及X.509(密码学里公钥证书的格式标 ...