1.class 和 id 的使用场景?

id选择器在文档中的是唯一的，用于定义独一无二的样式。
class类选择器可以重用，用于定义一些通用的样式

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

Paste_Image.png Paste_Image.png Paste_Image.png Paste_Image.png Paste_Image.png

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

Paste_Image.png Paste_Image.png

比较value值，谁大就用谁
当value值一样时，后面的会覆盖前面的，不同的属性会合并

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

a:link {
color: #000;
}
a:visited {
color: #F00;
}
a:hover {
color: #0F0;
}
a:active {
color: #00F;
}

原因：
当鼠标未点击a链接时， a:link起作用，所有应该放在最上面。当鼠标放在链接上时，a:link a:hover a:visited都会起作用，如果想让hover起作用，应将其放在后面。当鼠标点击链接的时候，如果想让a:active起作用，应将其放在后面

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

E:first-child 匹配元素E的第一个子元素
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio或checkbox元素
E::selection 匹配用户当前选中的元素
E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:not(selector) 匹配不符合当前选择器的任何元素

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

div:first-child 选择div标签父元素中第一个子元素
div:first-of-type 选择div标签父元素的同种标签中的第一个
div :first-child 选择div标签里面第一个子元素
div :first-of-type选择div标签里面同种标签的第一个

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

 #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的元素中所有a标签hover状态
#header .logo~p{匹配的是id名为header的元素中所有class名为logo元素和p标签
}
#header input[type="text"]{匹配的是id名为header的元素中所有type为text的input标签
}

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

原因：
.item1:first-child 选择的是class名为item1的三个标签的父元素div的第一个子元素，也就是p标签
.item1:first-of-type 选择的是class名为item1的三个标签的父元素div下面的同种元素的第一个 第二个h3标签是同种元素第二个所以未被选中