css元素定位优势
- css配合HTML使用，匹配HTML元素节点
- 语言简洁明了
- 前端开发基本使用css
css元素定位的重要事项
- 找到定位元素的唯一属性，优先级是id,name,css,xpath
- 如果没有唯一属性，就找有唯一属性的父节点、子节点或者相邻元素节点
- 如果属性是随机的，不能使用
css选择器介绍
- id选择器，以“#”定义
- class选择器，以“.”定义
- 标签选择器
- 属性选择器
- 分组选择器
- 组合选择符
伪类
- nth-child(n) 匹配属于其父元素的第 N 个子元素（常用）
- nth-last-child(n)，匹配倒数第几个元素
- nth-of-type(n)，第 N 个指定类型的标签
参考代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器高级</title>
<style>
/*id选择器，#定义*/
#abc{
color:red;
}
/*class选择器，.定义*/
.flower{
color:yellow;
}
/*标签选择器,可以选中同类型的HTML标签元素*/
/*标签选择器可以跟class选择器一同使用*/
p.flower{
font-size:24px;
}
/*分组选择器:选中一组HTML元素，用逗号分隔*/
p.flower,a{
background-color:blue;
}
/*属性选择器：选择具有特定属性的HTML元素,[]定义*/
[category]{
font-size:24px;
}
/*特定属性值的属性选择器*/
[category="poem1"]{
color:purple;
}
/*指定标签类型和属性值的属性选择器*/
span[category="poem2"]{
color:gray;
}
/*属性选择器：匹配单词边界*/
p[class~="abc"]{
background-color:green;
}
/*组合选择符
后代选择器 以空格分隔
子元素选择器 以>分隔
相邻兄弟选择器 以+分隔
后续兄弟选择器 以~分隔
*/
/*后代选择器:所有后代元素*/
#div1 p[class~="abc"]{
font-size:8px;
}
/*子元素选择器:只能选中其父元素的直接子元素*/
#div1>span{
font-size:40px;
}
/*相邻兄弟选择器：可选择紧接在另一元素后面的拥有相同父元素的元素*/
/*选中指定元素之后的第一个弟弟*/
span[category="poem1"]+span{
color:#747747;
}
/*后续兄弟选择器：选中指定元素之后的所有弟弟元素*/
span[category="poem1"]~span{
color:#0044bb;
}
</style>
</head>
<body>
<P id="abc">鹅鹅鹅，曲项向天歌</P>
<P class="flower">夜来风雨声，花落知多少</P>
<a>春眠不觉晓，处处闻啼鸟</a>
<div id="div1">
<span category="poem1">窗前明月光，疑是地上霜</span>
<span category="poem2">举头望明月，低头思故乡</span>
<span name="test">hello,world</span>
<p class="abc edf">
<a>百度一下</a>
<div id="a1">
<p>好好学习</p>
</div>
</p>
</div>
</body>
</html>