class 和 id 的使用场景?
id选择器，使用id="name"定义，使用#name调用来设置此id的css，其优先级高于类选择器，一个标签只能有一个id且每个id只能使用一次，常常用于建立派生选择器；
class类选择器，使用.name定义，使用class="name"调用，一个标签可以有多个类且同一个类可以用到不同的标签上，多用于多个标签样式相似或完全相同时；
CSS选择器常见的有几种?
| 通用选择器 | *{} |
|---|---|
| 类选择器 | .class{} |
| id选择器 | #id{} |
| 标签选择器 | element{} |
| 伪类选择器 | a:hover{} |
| 伪元素选择器 | a::before{} |
选择器的优先级是怎样的?对于复杂场景如何计算优先级？
!important为样式设置最高权限 > 元素标签上的内联样式 > id选择器#id > 类选择器.class > 伪类选择器a:hover > 属性选择器 > 标签选择器p a h1 > 通配符选择器* > 浏览器自定义
同级选择器，后写的会覆盖之前写的样式
a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
a:link（未被点击）
a:visited（已被点击）
a:hover（鼠标悬停其上）
a:active（鼠标已经按下，还没有释放）
*visited写在active后面，当a标签被点击之后，visited的样式会覆盖其他样式，导致其他样式都不生效
以下选择器分别是什么意思?
#header{ id为header的选择器
}
.header{ class为header的选择器
}
.header .logo{ header类中后代名为logo的类选择器
}
.header.mobile{ 类名同时含有header和mobile的选择器
}
.header p, .header h3{ header类中的后代p标签选择器 和header类中的后代h3标签选择器
}
#header .nav>li{ id为header的选择器中的后代nav类的直接子元素li标签
}
#header a:hover{id为header的选择器中的后代a在hover状态下的样式
}
#header .logo~p{ id为header的选择器中后代名为logo类之后同级的p标签
}
#header input[type="text"]{ id为header的选择器中属性为type="text"的input标签
}
列出你知道的伪类选择器：
| --- | --- |
|---|---|
| E:first-child | 匹配元素E的第一个子元素 |
| E:nth-child | 匹配元素E的第n个子元素 |
| E:enabled和E:disabled | 匹配元素E的状态为可用/不可用 |
| E:checked和E:selection | 匹配元素E的状态为单选框选中/复选框选中 |
| a:link | 未被点击的链接 |
| a:visited | 已被点击的链接 |
| a:hover | 鼠标悬停其上的链接 |
| a:active | 鼠标已经按下，但没有释放的链接 |
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的后代元素中寻找不同类型的第一个标签
运行如下代码，解析下输出样式的原因。
<style>
.item1:first-child{� 选取作为父元素第一个子元素的class为item1的元素
color: red;
}
.item1:first-of-type{ 选取作为父元素第一个出现的各类class为item1的元素，aa所在的p元素第一次出现，bb所在的h3元素第一次出现，都被选中，cc所在的h3在bb后面，因为h3标签出现过一次，所以不再被选中。
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
输出样式
