1. class 和 id 的使用场景?

class适用于类选择器，设置元素的class属性，为元素指定类名。多个元素可以拥有同一个类名。在CSS中，以.开头。
id适用于ID选择器，设置元素的id属性，每个id在文档中必须是唯一的。在CSS中，以#开头。ID选择器比类选择器的优先度更高。

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

基础选择器

组合选择器

属性选择器

伪类选择器

伪元素选择器

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

1. 属性后面使用!important的优先级最高
2. 内联样式
3. id选择器
4. 类选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通配符选择器
9. 浏览器自定义

通过逐级的对比选择器来确定优先级。如：

  /*.class1属于类选择器优先级高于p标签选择器，所以下面的优先级高于上面的*/
  #test p.class1 {}
  #test .class1.class2 { }

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

a:link>a:visited>a:hover>a:active。
a:visited一定要放在a:link之后，这样才能保证访问过的样式具有a:visited样式。a:hover要放在a:link和a:visited之后，这样才不会被覆盖。而a:active要放在最后，因为当鼠标点击时会先触发a:hover。总结一下，就是事件触发的先后顺序。
由于伪类的选择器优先级一致，后面的a链接样式会覆盖前面的。
记忆方法 LVHA, love and hate

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元素下 class为nav元素下的子元素li，不向下递归*/
    }
    #header a:hover{
    /*伪类选择器，匹配id为header的元素下，a标签的鼠标悬浮状态 */
    }
    #header .logo~p{
    /*匹配id为header的元素下，class为logo元素后面的的同级相邻p标签 */
    }
    #header input[type="text"]{
    /*匹配id为header的元素下，input标签类型为text的元素*/
    }

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

7. div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）

• div:first-child 匹配div，该div是其父元素的第一个子元素
• div:first-of-type匹配div标签在其父元素中第一次出现
• div :first-child 匹配所有div下的第一个子元素
• div :first-of-type匹配 div标签下第一次出现的子元素
  空格表示后代选择器

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

    <style>
    .item1:first-child{
      /*first-child选择class为item1在其父元素中的第一个子元素，所以aa字体颜色为红*/
      color: red;
    }
    .item1:first-of-type{
     /*first-of-type选择class为item1在其父元素中第一次出现的标签，所以p和h3标签背景色为蓝色*/
      background: blue;
    }
    </style>
     <div class="ct">
       <p class="item1">aa</p>
       <h3 class="item1">bb</h3>
       <h3 class="item1">ccc</h3>
     </div>