class和id的使用场景
id：指定标签的唯一标识，在当前页面中唯一，不可重复
class：指定标签的类名，不唯一，可以在多个标签中使用同一类名
常见的css选择器
1.基础选择器，包括基础选择器 * ， id选择器 #id ，class选择器 .class ，标签选择器 element；
2.组合选择器，包括多元素选择器 E,F ，后代选择器E F ，子元素选择器 E>F ，直接相邻选择器E+F ，普通相邻选择器 E~F ；
3.属性选择器 E[ ] ；
4.伪类选择器 E:first-child ，E:hover ，E:enabled ，E:nth-child(n) ，E:nth-last-of-type(n)等；
5.伪元素选择器，包括 E::first-line ，E::first-letter ，E::before ，E::after；
选择器的优先级
1.在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2.作为style属性写在元素标签上的内联样式
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义
在复杂场景中假设
1.行内样式 <div style="xxx"></div> ==> a
2.ID 选择器 ==> b
3.类，属性选择器和伪类选择器 ==> c
4.标签选择器、伪元素 ==> d
从a到d依次比较abcd中优先级相同的选择器的数量来确定整体的优先级
a:link, a:hover, a:active, a:visited 的顺序
visited和link会覆盖active和hover，所以visited和link在前，
hover会覆盖active，所以hover应该在active之前
以下选择器的意思
#header{
} 选中id="header"的元素
.header{
} 选中class="header"的元素
.header .logo{
}选中class="header"下所有class="logo"的后代元素
.header.mobile{
}选中class="header mobile"的元素
.header p, .header h3{
}选中class="header"中所有的p和h3
#header .nav>li{
}选中id="header"的后代元素中class="nav"中的直接子元素
#header a:hover{
}选中id="header"的后代元素中a的hover状态
#header .logo~p{
}选中id="header"的后代元素中在class="logo"中所有同级的p元素
#header input[type="text"]{
}选中id="header"的后代元素中所有type="text"的input元素
伪类选择器
div:first-child和div:first-of-type
div:first-child：匹配div父元素的第一个子元素。
div:first-of-type：匹配div父元素下使用同种标签的第一个子元素。
下图代码输出样式的原因
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
.item:first-child指class="item1"的父元素div中的第一个子元素，即<p class="item1">aa</p>，所以aa显示为红色；.item1:first-of-type指class="item1"的父元素div中与class="item1"所属标签相同属性的第一个元素，而这其中就包括<p class="item1">aa</p>和<h3 class="item1">bb</h3>，而cc所属的h3标签是class="item1"中的h3标签中的第二个，所以cc没有背景颜色
