1.class 和 id 的使用场景?

id选择器：
形如#name ;
优先级高于class选择器；
一个标签只能有一个id且每个id只能使用一次,多用于页面分块的块级标签上,如一个页面的导航区,内容区,页脚等;
用于控制单个元素的样式；
class选择器：
形如.name ；
可以定义多个元素共同样式；
一个标签可以有多个类且同一个类可以用到不同的标签上；

2. CSS选择器常见的有几种?

3. 选择器的优先级是怎样的?对于复杂场景如何计算优先级？

优先级由上到下：
①在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
②作为style属性写在元素标签上的内联样式
③id选择器
④类选择器
⑤伪类选择器
⑥属性选择器
⑦标签选择器
⑧通配符选择器
⑨浏览器自定义

针对复杂场景：
行内样式 <div style="xxx"></div> ==> a
ID 选择器 ==> b
类，属性选择器和伪类选择器 ==> c
标签选择器、伪元素 ==> d*
权重计算：4个等级（a b c d）由高到低，依次比较：

4. a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？

顺序：
① a:link 未被点击
② a:visited 已经被点击
③ a:hover 鼠标滑过
④ a:active 鼠标按下了还没被释放
原因：伪类选择器优先级相同,后面的会覆盖前面的样式；
正常顺序，鼠标划过->鼠标按下->鼠标释放；故而 a:hover 要放在 a:active前面；又因为正常的链接已经被点击过的话，a:visited样式会永久存在，若是放在下面会覆盖其他效果的，所以a:visited要放在其他2者前面；

5. 以下选择器分别是什么意思?

#header{  }   /*id选择器，匹配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的元素后代中包含nav类元素的直接子元素li */
#header a:hover{ }    /*匹配id为header的元素的后代a元素被鼠标悬停其上时*/
#header .logo~p{ }      /*匹配id为header的元素所有后代中包含logo类元素之后的所有同级p元素*/
#header input[type="text"]{ }     /*匹配id为header的元素所有后代属性type为text的input元素*/

6. 列出你知道的伪类选择器

同第2题

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类型中的第一个子元素；

例子：
css:
div:first-child{
  color:red;
}
div{
  margin-top:10px;
}
div:first-of-type{
  background:blue;
}
html:
  <div>1</div>
  <div>2</div>
  <div>   
      <p>div-p</p>
      <div>div-div</div>
  </div>
  <div>3</div>

:first-child/:first-of-type

div :first-child 表示匹配div标签下的第一个后代元素
div :first-of-type 表示匹配div下的后代元素标签中，相同类型标签的第一个子元素。

例子：
css:
div :first-child{
  color:red;
}
div{
  margin-top:10px;
}
div :first-of-type{
  background:blue;
}
html:
 <div>1</div>
 <div>   
     <p>
         div-p
         <p>div-p-p</p>
     </p>
     <div>div-div
     <p>div-div-p</p>
    </div>
 </div>

:first-child/ :first-of-type(加空格)

8. 运行如下代码，解析下输出样式的原因。

.item1:first-child{
  color: red;
}
.item1:first-of-type{
  background: blue;
}
</style>
 <div class="ct">
   <p class="item1">aa</p>/*.item1父元素下的第一个子元素字体变红；
其父元素下的第一个p标签子元素背景变蓝*/

   <h3 class="item1">bb</h3>/*.item1父元素下的第一个h3标签子元素背景变蓝*/

   <h3 class="item1">ccc</h3>
 </div>