- Python实现Web UI自动化测试实战:Selenium 3/4+unittest/Pytest+GitLab+Jenkins
- Storm 李鲲程 边宇明
- 585字
- 2021-08-17 17:24:19
4.2 CSS相关知识
通过使用CSS,前端工程师可以大大提升网页开发的工作效率。本节我们重点了解一下CSS的概念,然后学习一下CSS选择器的相关知识。
4.2.1 CSS基础
(1)什么是CSS
●CSS是层叠样式表(Cascading Style Sheets)的英文缩写。
●样式用于定义如何显示HTML元素。
●样式通常存储在样式表中。
●把样式添加到HTML 4.0中是为了解决内容与表分离的问题。
●外部样式表可以极大地提高工作效率。
●外部样式表通常存储在CSS文件中。
●多个样式定义可层叠为一个。
(2)CSS实例
CSS规则由两个主要的部分构成,分别是选择器和声明(可以有多条),如图4-14所示。
图4-14 CSS规则
选择器通常是需要改变样式的HTML元素。每条声明由一个属性和一个值组成。属性(property)是希望设置的样式属性(style attribute)。每个属性有一个值。属性和值用冒号分隔。
CSS声明总是以英文输入状态下的分号(;)结束,并且总是用大括号({})括起来。
p {color:red;text-align:center;}
(3)CSS注释
注释是用来解释代码的,你可以随意编辑它,浏览器会忽略它,并不执行注释的内容。CSS注释以“/*”开始,以“*/”结束,实例如下。
/*这是个注释*/ p { text-align:center; /*这是另一个注释*/ color:black; font-family:arial; }
4.2.2 CSS选择器
在Web UI自动化测试中,有一种元素定位的方式是使用CSS选择器(CSS selector)。借助CSS选择器,我们可以实现对HTML页面中的元素一对一、一对多或者多对一的控制。CSS选择器有多种格式,常用的格式如表4-3所示。
表4-3 CSS选择器格式
续表
后续我们在介绍元素定位时,会结合Selenium WebDriver的元素定位方法,深入学习、运用CSS选择器。