在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. verilog版插值
			
      开发环境:IDE:LIBERO 9.0(ACTEL公司的)芯片:AFS600 (BGA256),是混合系列的FPGA仿真软件:modelsim atcel 6.5d综合软件:synplify pr ...
    
			
    2. 
						
  2. 【转】Linux下的磁盘分区方法
			
    转自:https://www.cnblogs.com/lbole/p/8904298.html 一.硬盘接口类型 硬盘的接口主要有IDE.SATA.SCSI .SAS和光纤通道等五种类型.其中IDE和 ...
    
			
    3. 
						
  3. EffectiveC++01-03
			
    导读 作者Scott Meyers在如何有效运用C++方面给出了55个具体的做法,大致分为两类: 一般性的设计策略,集中于"如何在不同的做法中选择一种完成任务" 选择inherit ...
    
			
    4. 
						
  4. 一个简单mock-server 解决方案
			
    參考: 测试利器之Mock server 介紹 moco server - download Mockman - download 各种Mock工具比较 JMockit中文网 MockWebServe ...
    
			
    5. 
						
  5. 从输入URL到页面加载到底发生了什么
			
    很多初学网络或者前端的初学者大多会有这样一个疑问:从输入URL到页面加载完成到底发生了什么?总的来说,这个过程分为下面几个步骤:1.DNS解析2.与服务器建立连接3.服务器处理并返回http报文4.浏 ...
    
			
    6. 
						
  6. java日志文件log4j.properties配置详解
			
    一.Log4j配置 第一步:加入log4j-1.2.8.jar到lib下. 第二步:在CLASSPATH下建立log4j.properties.内容如下: 放在src下的话就不用配置 否则得去web. ...
    
			
    7. 
						
  7. Java 虚拟机JVM
			
    定义 Java Virtual Machine:Java程序的运行环境(Javae二进制字节码的运行环境),相比C++有以下好处: 一次编写,到处运行 自动内存管理,垃圾回收功能 数组下标越界检查 多 ...
    
			
    8. 
						
  8. Spring Boot 整合Spring Data JPA
			
    Spring Boot整合Spring Data JPA 1)加入依赖 <dependency> <groupId>org.springframework.boot</g ...
    
			
    9. 
						
  9. 【前端】JavaScript基础
			
    1 什么是js JavaScript是一种运行在浏览器中的解释型的编程语言 1.1 js引用 使用<script></script>标签 <script src=&quo ...
    
			
    10. 
						
  10. 接口测试的一些FAQ
			
    近期在学习接口测试,总会有很多问题,故把前任给的经验做个记录下. 1,测试一条delete接口,delete请求后要检验什么内容: 原来删除有分为:物理删除,删除资源,删除关系,软删除 一般delet ...
    
			
    11.