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。