1 class 和 id 的使用场景?
id:指定标签的唯一标识。使用#name定义（name为id名，可任意取名），使用id="name"调用，其优先级高于类选择器，一个标签只能有一个id且每个id只能使用一次.
class:指定标签的类名。用于CSS操作，把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类。 可以把多个类，放在一个class属性里，但必须用空格隔开；如：class='btn btnopen'
2.CSS选择器常见的有几种?
常用几种选择器有：ID选择器，类选择器，元素选择器，子选择器，后代选择器，伪类选择器，属性选择器等。这些选择器的常用表示方式是：
ID选择器：#container {}
类选择器：.box{}
元素选择器：p {}
子选择器：ul > li {}
后代选择器：div p {}
伪类选择器：a:visited {}
属性选择器：input[type="text"] {}
3.选择器的优先级是怎样的?对于复杂场景如何计算优先级？
选择器优先级 从高到低分别是：
在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
作为style属性写在元素标签上的内联样式
id选择器
类选择器
伪类选择器
属性选择器
标签选择器
通配符选择器
浏览器自定义
4. a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
/*顺序是这样的*/
a:link {
color: #000;
}
a:visited {
color: black;
}
a:hover {
color: yellow;
}
a:active {
color: red;
}
a:link,a:visited,这两个标签必须放在最前面，因为当鼠标放在a标签上时，写在最后的选择器会覆盖掉之前的选择器，想实现“当鼠标移动到a标签上变换颜色”的效果，需要将a:hover置于 a:link 和 a:visited 之后
a:link,a:visited,a:hover和a:active，当鼠标点击a标签，这四个选择器拥有相同的优先级，但是被写在最后的选择器会覆盖掉之前的选择器，要想实现“当鼠标点击a标签时变换颜色”的效果，需要将a:active放在最后。
只要记住，最简单的放在最上面，最复杂的在最下面。
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的元素的后代中鼠标悬停的a元素*/
}
#header .logo~p{ /*选择id是header的元素的后代中class是logo的元素的同级的p元素*/
}
#header input[type="text"]{ /*在id值为header的元素后代中寻找type属性为”text"的input元素*/
}
6.列出你知道的伪类选择器
E:first-child：匹配元素E的第一个子元素
E:nth-child：匹配元素E的第n个子元素
E:enabled和E:disabled：匹配元素E的状态为可用/不可用
E:checked：匹配元素E的状态为单选框选中
E:selection：匹配用户当前选中的元素，多用于文字被鼠标拉动选中
a:link：未被点击的链接
a:visited：已被点击的链接
a:hover：鼠标悬停其上的链接
a:active：鼠标已经按下，但没有释放的链接
7.div:first-child和div:first-of-type的作用和区别？
可以参考问题8
8. 运行如下代码，解析下输出样式的原因
<style>
.item1:first-child{
color: red;//选择id是item1，.ct的第一个子元素，也就是p标签，所以aa的字体是红色
}
.item1:first-of-type{
background: blue;//父元素中每一类元素的第一个类名为item1的元素的背景色为蓝色。将div中的子元素分为p、h3两类标签，每一类取第一个类名为item1的元素，背景为蓝色
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
