class 和 id 的使用场景?

id选择器以 "#" 来定义。在html中一个标签只能有一个唯一的id且每个id只能使用一次，那么id 选择器则为标有唯一id 的html标签指定特定的样式。
class选择器也叫类选择器，以一个点"."号显示。class选择器用于描述一组标签的样式，class 选择器有别于id选择器，class可以在多个标签中使用。

CSS选择器常见的有几种?

基础选择器：

组合选择器：

属性选择器：

伪类选择器：

伪元素选择器：

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

从高到低分别是：

1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
   作为style属性写在元素标签上的内联样式
2. id选择器
3. 类选择器
4. 伪类选择器
5. 属性选择器
6. 标签选择器
7. 通配符选择器
8. 浏览器自定义

复杂场景：

我们把行内样式计作a，id选择器为b，类，属性选择器和伪类选择器为c，标签选择器、伪元素为d，先比较a的大小，a大的优先级高；如果a相等，再比较b的大小，b大的优先级高以此类推。

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

a:link 未访问时的状态
a:visited 已访问过的状态
a:hove 鼠标移动到链接上时的状态
a:active 鼠标按下去时的状态

这四个都属于伪类选择器，权重相同，后面的会覆盖前面的效果。在CSS中，如果对于相同元素有针对不同条件的定义，宜将最一般的条件放在最上面，并依次向下，保证最下面的是最特殊的条件。这样，浏览器在显示元素时，才会从特殊到一般、逐级向上验证条件，才会使你的每一个CSS语句都起到效果。关于a:link, a:hover, a:active, a:visited 的顺序有一个便于记忆的“爱恨原则”（LoVe/HAte），即四种伪类的首字母:LVHA。

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

#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{     /* 选择"di=header"下"class=nav"元素下的直接子元素 li */
}
#header a:hover{    /* 选择"id=header"元素下的"a:hover" */
}
#header .logo~p{   /* 选择"id=headera"元素下"class=logo"的同级元素"p" */
}
#header input[type="text"]{  /*选择"id=header"元素下inpt[type="text"]文本框 */
}

列出你知道的伪类选择器

e:first-child 匹配父元素的的第一个子元素
e:last-child 匹配父元素的最后一个子元素
a:link 匹配所有未被点击的链接
a:visited 匹配所有已被点击的链接
a:active 匹配鼠标已经其上按下、还没有释放的E元素
a:hover 匹配鼠标悬停其上的E元素

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

div:first-child：匹配div父元素下第一个子元素
div :first-child：匹配div元素下的第一个元素
div:first-of-type：匹配div父元素下的同种类型标签下的第一个元素。
div :first-of-type：匹配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>

Paste_Image.png

.item1:first-of-type匹配到"class="item1""下的第一个子元素，所以aa显示为红色
.item1:first-of-type匹配到"class="item1""下同种标签的第一个子元素，所以aa,bb背景变为蓝色。