在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. Redis持久化rdb&aof
			
    Redis持久化rdb&aof 前言 持久化:即把数据存储于断电后不会丢失的设备中,通常是硬盘 常见的持久化方式: 主从:通过从服务器保持持久化,如mongoDB的replication se ...
    
			
    2. 
						
  2. newgrp - 登录到新的用户组中
			
    总览 (SYNOPSIS) newgrp [ group ] 描述 (DESCRIPTION) Newgrp 改变 调用者 的 用户组标识, 类似于 login(1). 调用者 仍旧 登录 在 系统  ...
    
			
    3. 
						
  3. fpga为什么要用nios 开发
			
    同一个项目可以用NIOS2也可以不用就可以完成,这句话说对也可以说不对,这要看是一个什么样的项目,你那样问的话可就说明有CPU和没CPU下的使用情况你还没有搞清楚,这两者并没有完全分开,简单的说就是有 ...
    
			
    4. 
						
  4. 运用在伪类content上的html特殊字符
			
    原文转载于:https://www.cnblogs.com/wujindong/p/5630656.html 项目中用到的一些特殊字符和图标 html代码 <div class="cr ...
    
			
    5. 
						
  5. PAT Basic 1024 科学计数法 (20 分) Advanced 1073 Scientific Notation (20 分)
			
    科学计数法是科学家用来表示很大或很小的数字的一种方便的方法,其满足正则表达式 [+-][1-9].[0-9]+E[+-][0-9]+,即数字的整数部分只有 1 位,小数部分至少有 1 位,该数字及其指 ...
    
			
    6. 
						
  6. 4Linux 终端命令格式
			
    Linux 终端命令格式 转自 目标 了解终端命令格式 知道如何查阅终端命令帮助信息 01. 终端命令格式 command [-options] [parameter] 说明: command:命令名 ...
    
			
    7. 
						
  7. shell字符串拼接
			
    name="Shell" url="http://c.biancheng.net/shell/" str1=$name$url #中间不能有空格 str2=&q ...
    
			
    8. 
						
  8. Codeforces 矩阵题 题单
			
    Matrix CF 166E Tetrahedron dp方程设为 f[i] 最后在 D点,g[i] 表示最后不在D点.最后 g[] 可以通过矩阵加速数列求得,数据可以强化,复杂度 \(O(logn) ...
    
			
    9. 
						
  9. Git提交代码的正确姿势
			
    按此步骤基本没问题,中间有conflict,需要手动解决. 1.git stash 2.git pull 3.git stash pop 4.git add --xxx 5.git commit -m ...
    
			
    10. 
						
  10. 【leetcode】K-th Symbol in Grammar
			
    题目如下: 解题思路:直接把每行的数据计算出来肯定是不行的,因为N最大是30,那个第N行长度就是2^30次方,这显然不可取.那么就只能找规律了,我采取的是倒推法.例如假如我们要求出第四行第七个元素的值 ...
    
			
    11.