1. class 和 id 的使用场景?

• id：id选择器，使用#name定义（name为id名），使用id="name"调用，一个标签只能有一个id且每个id只能使用一次，多用于页面分块的块级标签上；
• class：类选择器，使用.name定义（name为类名，可任意取名），使用class="name"调用，一个标签可以有多个类且同一个类可以用到不同的标签上，多用于多个标签样式相似或完全相同时；

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

2.1 基础选择器

2.2 组合选择器

2.3 属性选择器

2.4 伪类选择器

N的取值
1，2，3，4，5
2n+1, 2n, 4n-1
odd, even

2.5 伪元素选择器

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

3.1 选择器的优先级（权重）由高到低如下：

1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2. 作为style属性写在元素标签上的内联样式
3. id选择器
4. 类选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通配符选择器
9. 浏览器自定义

3.2 复杂场景如何计算优先级

选择器的特殊性分为四个部分，即 a,b,c,d,各代表如下：

• 行内样式 <div style="xxx"></div> ==> a
• ID 选择器 ==> b
• 类，属性选择器和伪类选择器 ==> c
• 标签选择器、伪元素 ==> d
  那么每一个CSS的声明均可分解为a，b，c，d，四部分，权重关系a>b>c>d，如果要比较两个声明哪个权重高，需按a到d的顺序进行依次对比，a值大的相对权重高；如果a值相同，则比较b值，此时b值大的权重高；如果b值也相同，则比较c值...
  如果选择器相同，后定义的选择器会覆盖先定义的选择器

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

顺序为 a:link, a:visited a:hover, a:active,
分析原因：伪类选择器权重相同，后定义的选择器会覆盖先定义的选择器。
未点击链接前，link伪类处于激活状态，鼠标悬停（或点击）时，a链接同时处于link和hover(或active)状态，由于它们特指度相同，
在同时激活的情况下，后出现的伪类样式会覆盖前面的伪类样式，故link状态必须写在hover(或active)之前。
　　再讨论hover和active的顺序，若把hover放在active后面，当点击链接一瞬，实际你在激活active状态的同时触发了hover伪类,hover在后面覆盖了active的颜色，所以无法看到active的颜色。故hover在active之前
　　其次，若把visited放在hover后面，那已访问过的链接一直触发着visited伪类，会覆盖hover样式。
　　最后，其实link、visited两个伪类之间顺序无所谓。（因为它俩不可能同时触发，即又未访问同时又已访问。）

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

#header{
} /* 选中ID="header"的元素 */
.header{
} /* 选中class="header"的元素 */
.header .logo{
} /* 选中class="header"的元素的后代元素中 class="logo"的元素 */
.header.mobile{
} /* 选中class="header mobile"的元素，要求class既有header又有mobile */
.header p, .header h3{
}  /* 选中class="header"的元素的后代元素中带有p标签的元素，以及class="header"的元素的后代元素中带有h3标签的元素 */
#header .nav>li{
} /* 选中ID="header"的元素的后代元素中class="nav"的直接子元素li元素 */
#header a:hover{
} /* 选中ID="header" 的元素的后代元素中鼠标悬停其上的元素 */
#header .logo~p{
}  /* 选中ID="header"的元素的后代元素中、与class="logo"的元素同级的p元素 */
#header input[type="text"]{
} /* 选中ID="header"的元素的后代元素中、input type为text的input元素 */

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的标签
• div :first-child
  div元素下的第一个子元素
• div :first-of-type
  div元素下所有的同类型的第一个元素

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

<style>
.item1:first-child{
  color: red;
} /* 选中class="iterm1"的第一个子元素，故 <p class="item1">aa</p>被选中 */
.item1:first-of-type{
  background: blue;
} /* 选中id为item1的父元素下每种类型的第一个子元素，即  <p class="item1">aa</p>和 <h3 class="item1">bb</h3>被选中，*/
</style>
 <div class="ct">
   <p class="item1">aa</p>
   <h3 class="item1">bb</h3>
   <h3 class="item1">ccc</h3>
 </div>