在selenium元素定位时会用到css选择器选取元素，虽说xpath在定位元素时能解决大部分问题，但使用css选择器选取元素也是一种不错的选择。

css相较与xpath选择元素优点如下：

  • 表达式更加简洁
  • 一般情况css的运行速度是优于xpath的。

常用的CSS选择器大致分为以下几种：

1.基础选择器：

基础选择器包括：

  • 标签：直接使用标签名,如下列：p
  • 类（class)：“.”（英文句号）+class值
  • id：“#”+id值
  • 通配符：意为匹配所有元素， 用“*”表示

事列：

style标签中定义css选择器，以下为各个css选择方式
选中的元素会根据css选择器中设置的不同颜色进行展示，以下事列同理。


<!DOCTYPE html>

<!--基础选择器-->

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Base Css</title>

    <!--style标签中定义css选择器，以下为各个css选择方式-->

    <!--id方式选择：“#”加id值，如下：#title-->

    <!--标签方式选择：直接使用标签名，如下：p-->

    <!--class方式选择：“.”（英文句号）加class值，如下：.text-->

    <style type="text/css">

        #title{

            color:red;

        }

        p{

            color:blue;

        }

        .text{

            color: green;

        }

    </style>

</head>

<body>

    <h3 id="title">这是id</h3>

    <p>这是标签</p>

    <div class="text">

        <em>这是类</em>

    </div>

</body>

</html>

运行结果：

2.组合选择器

组合选择器就是将基础选择器的方法进行混合使用.有如下几种方式：

  • 标签指定选择：以标签为基本选择再连接id或class进行综合选择。如p#title
  • 后代选择：可以选择父类以下所有的子类（即既能选中儿子也能选中孙子及所有后代）。相比较子代选择，后代选择范围更广。选择选择使用空格连接 父类到子类及下面类的元素。
  • 子代选择：通过父类选择子类，只能选中子类，不包含子类的子类（即可以选中儿子，不能选中孙子）。使用“>”连接，子代选择只能选择子类中的第一个子类，不能选择子类的子类。
  • 并集选择：将多个选择使用“，”连接，表示“和”的意思

事列如下：

标签指定选择：

<!DOCTYPE html>

<!--标签指定选择器-->

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>标签指定选择</title>

    <style>

        p#a1{

            color:red;

        }

        p.aclass{

            color:blue;

        }

    </style>

</head>

<body>

    <div>

        <p>我想睡懒觉</p>

        <p id="a1">根本没睡醒</p>

        <p class="aclass">困得要死</p>

    </div>

</body>

</html>

运行结果：

 后代选择器：

<!DOCTYPE html>
<!--后代选择器-->
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
             .xiaoyang>#idle>em{
                color: red;
            }

        </style>
    </head>
    <body>
        <div class="xiaoyang">
            <div id="idle">
                <em>该写什么</em>
                <em>不知道哎</em>

                <p>
                    <em>这就有点小忧伤</em>
                    <em>你忧伤个锤锤</em>
                </p>
            </div>
        </div>
    </body>

</html>

运行结果：

子代选择器：



<!DOCTYPE html>
<!--= 子代选择器-->
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .xiaoyang #idle em{
                color: yellowgreen;
            }

        </style>
    </head>
    <body>
        <div class="xiaoyang">
            <div id="idle">
                <em>该写什么</em>
                <em>不知道哎</em>

                <p>
                    <em>这就有点小忧伤</em>
                    <em>你忧伤个锤锤</em>
                </p>
            </div>
        </div>
    </body>

</html>




运行结果：




通过上面的比较可以看出：


子代选择器只能选择到第一代子元素（可以选择到儿子，选不到孙子）


后代选择器可以选择所有后代元素（既有儿子，还有孙子等）


并集选择器：




<!DOCTYPE html>

<!--并集选择器-->

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            p,#one,.two{

                color: red;

            }

        </style>

    </head>

    <body>

        <p>我爱学习</p>

        <span id="one">我爱运动</span>

        <strong class="two">我爱睡觉</strong>

    </body>

</html>




运行结果：




3.属性选择器


属性选择器是运用标签中的属性进行定位，比如标签中常用的text属性等。


事列：




<!DOCTYPE html>

<html>

<!--属性选择器-->

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            p{

                color: blue;

            }

            p[title="one"]{

                color: red;

            }

            p[title~="two"]{

                color: green;

            }

            p[title|="three"]{

                color: pink;

            }

        </style>

    </head>

    <body>

        <p title="five">我爱学习</p>

        <p title="one">我爱运动</p>

        <p title="one two">我爱吃饭</p>

        <p title="three-four">我爱睡觉</p>

    </body>

</html>




运行结果：




以上为常用css选择器的用法整理，若想了解其他类型选择器（比如伪类选择器），建议系统学习CSS。


在此说明：该篇随笔中的事列部分借鉴自实验楼css课程，如有侵权立删！
												


											
selenium元素定位之css选择器的更多相关文章
	

    
								
  1. 元素定位之css选择器(1)
		
    CSS选择器用于选择你想要的元素的样式的模式. "CSS"列表示在CSS版本的属性定义(CSS1,CSS2,或对CSS3). 表格部分摘自菜鸟教程:https://www.runo ...
    
		
    2. 
						
  2. python+selenium元素定位之CSS学习02
		
    参考文档:https://www.runoob.com/cssref/css-selectors.html CSS选择器用于选择你想要的元素的样式的模式. "CSS"列表示在CSS ...
    
		
    3. 
						
  3. python+selenium元素定位之CSS学习01
		
    参考文档:https://www.w3school.com.cn/cssref/css_selectors.asp 选择器 例子 例子描述 CSS .class .intro 选择 class=&qu ...
    
		
    4. 
						
  4. 元素定位之css选择器(2)
		
    理论学习地址:https://www.runoob.com/cssref/css-selectors.html 定位思路: 先在单元素范围内选择查找id或name,定位不到的话往上查扩大范围 使用实例 ...
    
		
    5. 
						
  5. Selenium3 + Python3自动化测试系列二——selenium元素定位
		
    一.selenium元素定位 Selenium对网页的控制是基于各种前端元素的,在使用过程中,对于元素的定位是基础,只有准去抓取到对应元素 才能进行后续的自动化控制,我在这里将对selenium8种元 ...
    
		
    6. 
						
  6. selenium元素定位陷阱规避
		
    为什么selenium可以在各个浏览器上运行?因为selenium在与各个浏览器驱动执行前,会先把脚本转化成webdriver, webdriver wire协议(一种json格式的协议),这样就与脚 ...
    
		
    7. 
						
  7. 自动化测试基础篇--Selenium元素定位
		
    摘自https://www.cnblogs.com/sanzangTst/p/7457111.html 一.Selenium元素定位的重要性: Web自动化测试的操作:获取UI页面的元素,对元素进行操 ...
    
		
    8. 
						
  8. 超全selenium元素定位XPath、CSS
		
    说明:在HTML页面中,<p> 是一个标签,<p>hello</p> 是一个元素,元素由一个开始的标签和结束的标签组成.<font color="r ...
    
		
    9. 
						
  9. Java + selenium 元素定位（4）之By CSS
		
    这篇我要介绍元素定位的倒数第二个方法啦,就是基于CSS的元素定位.关于一些CSS的知识,我这里就不累赘的讲了,以后可能会单独写一篇关于CSS的介绍.当然个人推荐如果之前完全没有CSS只是储备的,可以选 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 020-VMware虚拟机作为OpenStack计算节点，上面的虚拟机无法启动问题解决
			
      问题描述: VMware虚拟机作为OpenStack计算节点,如果安装的操作系统是CentOS7.3,则在此计算节点放置的虚拟机无法正常启动,报如下错误: 在创建计算节点时,为了能让 KVM 能创 ...
    
			
    2. 
						
  2. 02-第一个Python程序
			
    第一个HelloPython程序 1.1Python源程序的基本概念 Python源程序是一个特殊格式的文本文件,可以使用任意文本编辑软件做Python的开发 Python程序的文件扩展名通常都是.p ...
    
			
    3. 
						
  3. @RequestBody、@RequestParam、@PathVariable区别与使用场景
			
    由于项目是前后端分离,因此后台使用的是spring boot,做成微服务,只暴露接口.接口设计风格为restful的风格,在get请求下,后台接收参数的注解为RequestBody时会报错:在post ...
    
			
    4. 
						
  4. Apache+Mysql+PHP 套件
			
    Apache+Mysql+PHP 套件   最近要装个Apache+Mysql+PHP的一个环境. google下后,发现现在的安装变得越来越简单了.不再需要麻烦的配置安装,只需简单执行个sh就搞定了 ...
    
			
    5. 
						
  5. 【LuoguP3241】[HNOI2015] 开店
			
    题目链接 题意 给出一棵边带权的树,多次在线询问一个点到一个区间内的点的距离和. Sol 分块过不了的 一个 trick ,都知道要算两点之间距离可以拆成到根的距离和他们的 LCA 到根的距离 ,其实 ...
    
			
    6. 
						
  6. python补充之进制转换、exec、eval、compile
			
    目录 eval.exec和compile 1.eval函数 2.exec函数 eval()函数和exec()函数的区别 python中的进制转换 eval.exec和compile 1.eval函数  ...
    
			
    7. 
						
  7. 《SaltStack技术入门与实践》——执行结果处理
			
    执行结果处理 本章节参考<SaltStack技术入门与实践>,感谢该书作者: 刘继伟.沈灿.赵舜东 Return组件可以理解为SaltStack系统对执行Minion返回后的数据进行存储或 ...
    
			
    8. 
						
  8. vue安装iview和配置
			
    在命令行工具上输入:npm install iview --save 等待安装完成. 在项目的src/main.js中添加三行代码引入iview import iView from 'iview' i ...
    
			
    9. 
						
  9. 使用HTML和CSS来实现为文字设置图片底纹
			
    先看一下最终实现的效果 图中的hello是文本而不是图片 那么如何实现这种效果呢? HTML部分: 创建一个h1标签 ,标签内容为(hello).通过link标签链接外部样式表style.css. s ...
    
			
    10. 
						
  10. web大文件下载+断点续传
			
    实现原理(1)首先获得下载文件的长度,然后设置本地文件的长度.(2)根据文件长度和线程数计算每条线程下载的数据长度和下载位置.如:文件的长度为6M,线程数为3,那么,每条线程下载的数据长度为2M,每条 ...
    
			
    11.