在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. intellij idea 的快捷键方法
			
    1.Ctrl+N按名字搜索类 相当于eclipse的ctrl+shift+R,输入类名可以定位到这个类文件,就像idea在其它的搜索部分的表现一样,搜索类名也能对你所要搜索的内容多个部分进行匹配,而且 ...
    
			
    2. 
						
  2. C++函数声明与定义
			
    一个C++函数,如果没有函数声明而只有函数定义,程序照样运行,但要求这个函数定义必须放在main函数之前,否则编译按照从上到下的顺序扫描下来,就会出现编译器不认识它的情况. 如果一个程序同时有函数声明 ...
    
			
    3. 
						
  3. 图解Qt安装（Windows平台）
			
    http://c.biancheng.net/view/3858.html 本节介绍 Qt 5.9.0 在 Windows 平台下的安装,请提前下载好 Qt 5.9.0.不知道如何下载 Qt 的读者请 ...
    
			
    4. 
						
  4. Crazy Search POJ - 1200  （字符串哈希hash）
			
    Many people like to solve hard puzzles some of which may lead them to madness. One such puzzle could ...
    
			
    5. 
						
  5. python装饰器的简单理解
			
    如果你接触 Python 有一段时间了的话,想必你对 @ 符号一定不陌生了,没错 @ 符号就是装饰器的语法糖. 装饰器的使用方法很固定: 先定义一个装饰函数(帽子)(也可以用类.偏函数实现) 再定义你 ...
    
			
    6. 
						
  6. 文本检错——中文拼写检查工具FASPell
			
    最近因为相关项目需要考虑中文文本检错,然后就发现了爱奇艺发布的号称SOTA的FASPell已经开源代码,所以开始着手实现. 检错思想两步:一,掩码语言模型(MLM)产生候选字符:二,CSD过滤候选字符 ...
    
			
    7. 
						
  7. Java使用wait() notify()方法操作共享资源详解_java - JAVA
			
    文章来源:嗨学网 敏而好学论坛www.piaodoo.com 欢迎大家相互学习 Java多个线程共享资源: 1)wait().notify()和notifyAll()方法是本地方法,并且为final方 ...
    
			
    8. 
						
  8. idea 打包model 为jar包
			
    1,在项目上鼠标右键 --> Open Module Settings 2, Artifacts --> + --> JAR --> From modules with dep ...
    
			
    9. 
						
  9. break、continue、return的使用
			
    跳转控制语句: java中的goto是保留字,目前不能使用,虽然没有了goto语句可以增强程序的安全性,但是也带来很多不便. 比如说:我们想让某个循环到某一步的时候就结束,现在就做不了这个事情了.为了 ...
    
			
    10. 
						
  10. Leetcode 16. 3Sum Closest（指针搜索）
			
    16. 3Sum Closest Medium 131696FavoriteShare Given an array nums of n integers and an integer target, ...
    
			
    11.