CSS选择器的优先级
css中有四种基本选择器，就一般开发而言，css一般采用clss选择器进行dom样式编辑，而id则交给js进行一些逻辑交互处理（也有不少例外，这里是一般习惯来说，并没有特别严格的标准）。
!important > 行内选择器 > id选择器 > 类选择器 > 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
color: red;
}
/*标签选择器*/
div {
margin: 0 auto;
}
/*class选择器*/
.cla {
background-color: red;
}
/*id选择器*/
#my_id {
background-color: blue;
}
</style>
</head>
<body>
<!-- 行内选择器style -->
<div class="cla" id = "my_id" style="background-color:yellow">学完了安卓，继续学<span>前端</span>哟</div>
</body>
</html>
其他选择器
1. 后代选择器
该选择器指向的是某节点的某个后代结点，使用选择器之间有空格分隔例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.d1{
background-color: pink;
}
.d1 .d2 { // 选择的是.d1的后代节点.d2
color: yellow;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">我是后代1</div>
<div class="d3">我是后代2</div>
</div>
</body>
</html>
2. 交集选择器
交集选择器的写法为： 选择器A选择器B ，两个选择器之间是连起来的，没有分隔。指向既满足选择器A且满足选择器B的元素结点
// 交集选择器
div.d3 {
color: green;
}
3. 并集选择器
并集选择器的写法：用逗号隔开。
.d2, .d3{
background-color: red ;
}
4、伪类选择器
其对应几种不同的状态：
link：超链接点击之前（对于<a>标签）visited：超链接点击之后（对于<a>标签）focus：是某个标签获得焦点的时候（比如某个输入框获得焦点）hover：鼠标放到某个标签上的时候active：点击某个标签没有松鼠标时
5. 子代选择器
与后代选择器不同的是，子代选择器只选择到第一代。使用 父节点选择器 > 子结点选择器 的写法。
.d1>d2{
background-color: pink;
}
6. 兄弟选择器
兄弟选择器表示两个并列的结点，通过某结点选择到它的下一个兄弟结点。使用 “+” 号分隔。
.d2+.d3{
font-size: 28px;
}
7. 序选择器
通过 XXX:first-child 选择XXX下的第一个子代结点；通过 XXX:last-child 选择XXX下的最后一个子代结点。
<style type="text/css">
ul li:first-child{ //选择第一个子元素
color:red;
}
ul li:last-child{ //选择最后一个子元素
color:red;
}
</style>
<ul>
<li class="first">项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li class="last">项目</li>
</ul>