1、class 和 id 的使用场景?

• id：id选择器，使用#name定义（name为id名，可任意取名），使用id="name"调用，其优先级高于类选择器，一个标签只能有一个id且每个id只能使用一次，多用于页面分块的块级标签上；

• class：类选择器，使用.name定义（name为类名，可任意取名），使用class="name"调用，一个标签可以有多个类且同一个类可以用到不同的标签上，多用于多个标签样式相似或完全相同时。

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

1. 基础选择器

2. 组合选择器
3. 属性选择器
4. 伪类选择器
5. 伪元素选择器

2.1、基础选择器

2.2、组合选择器

2.3、属性选择器

2.4、伪类选择器

2.5、伪元素选择器

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

3.1、选择器的优先级（从高到低排列）

1. 在属性后面有!import的元素样式

2. 作为style写在元素中的内联样式
3. id选择器
4. 类选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通配符选择器
9. 浏览器自定义

3.2、复杂场景计算优先级

• 根据组合选择器按照以下规则统计各类选择器的个数：
  行内样式 --> 统计值为a
  ID选择器 --> 统计值为b
  类、属性选择器、伪类选择器 --> 统计为c
  标签选择器、伪类选择器 --> 统计为d

• 先比较a值的大小，a值大的则优先级高;如果a值相等，则再比较b值的大小，b值大的优先级高；如果b值相等，则比较c值的大小，c值大的优先级高；如果c值相等，则比较d值的大小，d值大的优先级。

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

4.1、顺序如下：

  <style type="text/css">
    a:link {
      color: red;
    }
    a:visited {
      color: black;
    }
    a:hover {
      color: blue;
    }
    a:active {
      color: green;
    }

4.2、原因

• 当鼠标移动到a标签上，此时与标签颜色相关的选择器有：a:link,a:visited,a:hover,这三个选择器拥有相同的优先级，但是被写在最后的选择器会覆盖掉之前的选择器，因此要想实现“当鼠标移动到a标签上变换颜色”的效果，需要将a:hover置于 a:link 和 a:visited 之后。

• 当鼠标点击a标签，此时与标签颜色相关的选择器有：a:link,a:visited,a:hover和a:active，这四个选择器拥有相同的优先级，但是被写在最后的选择器会覆盖掉之前的选择器，因此要想实现“当鼠标点击a标签时变换颜色”的效果，需要将a:active置于a:link,a:visited,a:hover 之后。

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

#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元素下所有直接标签为li的子元素
#header a:hover{
} // 选中id为header的元素的后代元素中，在hover状态下的a元素
#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: first-of-style 属于其父元素所有子元素中首个div元素
• div :first-child是选择所有div元素内所有元素中属于其父元素的首个子元素
• div :first-of-type 是选择所有div元素内所有元素中属于其父元素的首个该类型的子元素

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>

Paste_Image.png