class 和 id 的使用场景?
当我们需要将某些元素归为一类并赋予它们相同的样式时采用class；
当我们希望标记某一个元素且赋予它独有的样式时采用id。
CSS选择器常见的有几种?
1、基础选择器；
2、组合选择器；
3、属性选择器；
4、伪类选择器；
5、伪元素选择器。
选择器的优先级是怎样的?对于复杂场景如何计算优先级？
！important（尽可能避免使用） > 行间样式 ＞ id选择器 ＞ 类选择器(class) > 伪类选择器 > 属性选择器 ＞ 标签选择器 ＞ 通配符选择器(*) > 浏览器自定义样式
在较复杂的场景下，可以简化为对选择器优先级和数量的加权，我们设：
行内样式为a
id选择器为b
class选择器、属性选择器和伪类选择器为c
标签选择器、伪元素选择器为d
先对比a类选择器的数量，数量较多的则优先级高。若a类数量相等，再对比b类，以此类推。
a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
a:hover必须写在a:link和a:visited之后，a:active必须写在其它三者之后。
因为它们都属于伪类选择器，优先级是一样的，所以谁在后面，就可以覆盖前面的样式。当鼠标悬停在元素上时，hover的样式会覆盖link和visited的样式，而当鼠标按下时，active的样式则会覆盖其它三者的样式。
以下选择器分别是什么意思?
#header{
} //匹配某个id=header的元素
.header{
} //匹配所有class=header的元素
.header .logo{
} //匹配所有class=header的元素后代中class=logo的元素
.header.mobile{
} //匹配所有class=header且class=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>标签内的元素
列出你知道的伪类选择器
link //匹配未点击的链接
visited //匹配点击过的链接
hover //匹配鼠标悬停时的元素
active //匹配鼠标按下尚未释放时的元素
focus //匹配获得焦点的元素
selection //匹配用户当前选中的元素
first-child //匹配第一个子元素
nth-child(n) //匹配第n个子元素
first-of-type //匹配使用同种标签的第一个子元素
nth-of-type(n) //匹配使用同种标签的第n个子元素
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元素下的第一个div子元素
运行如下代码，解析下输出样式的原因。
<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>
在<style>标签内，第一个选择器.item1:first-child代表父级元素下第一个且class=item1的子元素，所以aa的颜色为red；第二个选择器.item1:first-of-type代表父级元素下每个标签类型中的第一个元素，因此aa和bb的背景颜色为blue。
