1. class与id的使用场景
- 一个页面中可以有多个同样的class，可以用于不同标签但是样式相同的元素上。
- 一个页面中只允许有一个id，id具有唯一性，多用于标记页面分级的块级标签上。
2.css选择器常见的有几种
基础选择器
*通用选择器，选择页面上的所有元素
#idid选择器，选择对应id的元素
.classclass选择器，选择对应class的一个或多个元素
element标签选择器，选择对应标签名的一个或多个元素组合选择器
E,F,...多元素选择器，用逗号隔开的表示选择多个元素，E,F或更多都是并列关系，他们同时被选取
E F后代选择器，用空格隔开的表示选取E的后代中的F元素
E>F子元素选择器，表示选取E的直接后代中所有F元素，与上一条的区别在于是不是子元素。
eg：div>p此例中只会选择class为p1的p元素，p2不会被选取
<div>
<p class="p1"></p>
<div>
<p class="p2"></p>
</div>
</div>
E+F 直接相邻选择器，表示选取E元素之后相邻的同级F元素
E~F 普通相邻选择器，表示选取E元素后面的同级F元素，不论相邻与否。
- 属性选择器
E[attr]选取具有该属性的元素。eg.p[name]选取所有有name属性的p元素。
E[attr=value]选取所有attr属性的属性值为value的元素 eg.p[name="p1"]会选取所有name属性为 p1 的p元素
4.伪类选择器
E:first-child 选取作为父元素第一个子元素的E元素（实际形式是F E:first-child 区别于 E>:first-child）
E:last-child 选取作为父元素最后一个个子元素的E元素
E:nth-child() 选取作为父元素第n个子元素的E元素，n从1开始取，n为1的时候等价于first-child 选择器
E:hover/link/active/visited 选取E元素的某一状态，给对应状态添加样式
- 伪元素选择器
E:first-letter选取E元素的第一个字母。eg.
p:first-letter{color:red} //n的颜色是红色
<p>nihao</p>
E:before/after E元素的前面或后面的元素，一般用于在E元素的前面或后面插入元素，可用来清除浮动，或添加元素。
3. 选择器的优先级，复杂场景如何计算优先级
它们之间的顺序排列如下：
@import > 内联样式 > id选择器 > 类选择器、伪类选择器、属性选择器 > 标签选择器、伪元素选择器
在复杂的场景（即在应用了各种的css选择器的组合两条或更多的css规则冲突时），会先比较优先级较高的选择器个数，如果还相同则继续向下，比较优先级较低的选择器的个数，以此类推。
4. a:link, a:hover, a:active, a:visited 的顺序
他们的顺序是 a:link, a:visited,a:hover,a:active（鼠标按下去时的状态）
至于为什么这么拍，首先，他们都是伪类选择器，相同的选择器优先级别当然相同，所以自然而然会排在后面的覆盖前面的样式。a:hover如果在a:visited后面的话，那么当该链接访问过后，就会一直保持访问后的样式，鼠标滑上去即hover样式怎么也不会生效，因为被覆盖了。至于a:active,放在前面的话那么样式不会生效，active生效的场景，hover也会生效，hover就会覆盖active。
5. 常见选择器实例
#header //选择id为header的元素
.header //选择class为header的所有元素
.header .logo //选择class为header的所有元素后代中class为logo的所有元素
.header.mobile // 选择class为header和mobile的所有元素 eg. <p class="header mobile"></p>
.header p,.header h3 //选取class为header的所有元素的后代中 p 元素和 h3 元素
#header .nav>li //id为header元素中后代中class为nav的元素的所有 li 子元素
#header a:hover //id为header元素中的所有a标签的hover状态
#header .logo~p //id为header的元素后代中class为logo的元素的所有同级的p元素
#header input[type="text"] //id为header的元素后代中有属性type且其值为text的所有input元素
6.伪类选择器
E:first-child 选取作为父元素第一个子元素的E元素
E:last-child 选取作为父元素最后一个个子元素的E元素
E:nth-child() 选取作为父元素第n个子元素的E元素，n从1开始取，n为1的时候等价于first-child 选择器
E:hover/link/active/visited 选取E元素的某一状态，给对应状态添加样式
E:enabled 选取表单中可用的元素
E:disabled 选取表单中禁用的元素
7. div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别
div:first-child 选取作为父元素第一个子元素的div元素
div:first-of-type 选取父元素中第一个出现的div元素（后面的div就不选取了）
div :first-child 选取所有div元素中第一个子元素
div :first-of-type 选取所有div元素中第一个出现的各类元素 eg.
<div>
<h3></h3> //选中
<p></p> //选中
<div></div> //选中
<div></div>
<p></p>
<p></p>
</div>
div :first-of-type //选取的如标示
8. 代码实践
<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>
.item1:first-child 选取作为父元素第一个子元素的class为item1的元素，自然aa的颜色要变红
.item1:first-of-type 选取作为父元素第一个出现的各类class为item1的元素，aa所在的p元素第一次出现，bb所在的h3元素第一次出现，都被选中，cc所在的h3在bb后面，因为h3标签出现过一次，所以不再被选中。
