在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. Linux服务器安装系统之1-LSI阵列卡Raid10配置方法
			
    
			
    2. 
						
  2. mysql 5.0存储过程学习总结
			
    mysql存储过程的创建,删除,调用及其他常用命令 本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群:   281442983 (点击链接加入群:http://jq.q ...
    
			
    3. 
						
  3. git push -u origin master和git push <远程主机名> <本地分支名>:<远程分支名>作用
			
    git push git push命令用于将本地分支的更新,推送到远程主机.它的格式与git pull命令相仿. $ git push <远程主机名> <本地分支名>:< ...
    
			
    4. 
						
  4. 前端框架之BootStrap的简单介绍
			
    Bootstrap补充 一.一个小知识点 1.截取长屏的操作 2.设置默认格式 3.md,sm, xs 4.空格和没有空格的选择器 二.响应式介绍 - 响应式布局是什么? 同一个网页在不同的终端上呈现 ...
    
			
    5. 
						
  5. 最简单的注册美区Apple ID方法
			
    最简单方法注册苹果美区Apple ID 1.打开苹果官网链接 苹果官网 2. 点击右下角的 United States 3. 点击图片中的选项 4.点击右上角的选项创建新的Apple ID 注意是新的 ...
    
			
    6. 
						
  6. man   lspci
			
    lspci(8)                      Linux PCI Utilities                     lspci(8) NAME       lspci - 列出 ...
    
			
    7. 
						
  7. docker 内时区和宿主机差8个小时，怎么办？
			
    docker run -d -it --name tt -e TZ=Asia/Shanghai -p : api 使用-e参数指定时区
    
			
    8. 
						
  8. [HG]walk 题解
			
    前言 学长博客划水,抄题解,差评. 于是我来重新写一篇正常的题解,虽然解法跟标程不一样,但是复杂度是一样的. 题面 题目描述 在比特镇一共有\(n\)个街区,编号依次为\(1\)到\(n\),它们之间 ...
    
			
    9. 
						
  9. 170903-关于MyBatis
			
    MyBatis总体介绍:  MyBatis实际上是Ibatis3.0版本以后的持久化层框架[也就是和数据库打交道的框架]! 和数据库打交道的技术有: 原生的JDBC技术--->Spring的Jd ...
    
			
    10. 
						
  10. JavaScript-Templates
			
    https://github.com/blueimp/JavaScript-Templates https://blueimp.github.io/JavaScript-Templates/ http ...
    
			
    11.