selenium元素定位之css选择器
在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 Csstitle>
<style type="text/css">
#title{
color:red;
}
p{
color:blue;
}
.text{
color: green;
}
style>
head>
<body>
<h3 id="title">这是idh3>
<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>
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课程，如有侵权立删！