在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课程，如有侵权立删！