class 和 id 的使用场景?

• class用于指定元素属于哪一种样式的类
• id属性用于定义一个元素的独特的样式

class是一个样式，先定义好， 然后可以套给多个结构/内容, 便于复用。也就是说class名称可以相同。
id是一个标签，用于区分不同的结构和内容，就象你的名字， 如果一个屋子有2个人同名，就会出现混淆；id是先找到结构/内容，再给它定义样式；
传送门

CSS选择器常见的有几种?

1. 基础选择器

• 通用选择器
• id选择器
• 类选择器
• 标签选择器

2. 组合选择器

• 多元素选择器
• 后代选择器
• 子元素选择器
• 直接相邻选择器
• 普通相邻选择器
• .class1.class2（没用分隔符时，.和#可作为分隔符元素）
• element#id（没用分隔符时，.和#可作为分隔符元素）

3. 属性选择器

• E[attr] 匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div
• E[attr = value]
• E[attr ~= value]
• E[attr ^= value]
• E[attr $= value]
• E[attr *= value]

4. 伪类选择器

• E:first-child 匹配元素E的第一个子元素
• E:link 匹配所有未被点击的链接
• E:visited 匹配所有已被点击的链接
• E:active 匹配鼠标已经其上按下、还没有释放的E元素
• E:hover 匹配鼠标悬停其上的E元素
• E:focus 匹配获得当前焦点的E元素
• E:lang(c) 匹配lang属性等于c的E元素
• E:enabled 匹配表单中可用的元素
• E:disabled 匹配表单中禁用的元素
• E:checked 匹配表单中被选中的radio或checkbox元素
• E::selection 匹配用户当前选中的元素（两个冒号是CSS3写法，一个是CSS2写法）

5. 伪元素选择器

• E:root 匹配文档的根元素，对于HTML文档，就是HTML元素
• E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
• E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1
• E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素
• E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
• E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)
• E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
• E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
• E:only-child 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
• E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
• E:empty 匹配一个不包含任何子元素的元素，文本节点也被看作子元素
• E:not(selector) 匹配不符合当前选择器的任何元素

选择器的优先级是怎样的?

一般顺序为：!important>内联样式>类选择器>伪类选择器>属性选择器>标签选择器>通配符选择器>浏览器自定义

对于复杂场景如何计算优先级？

首先，当有!important出现时，无论是什么样式优先级最高。其次再算每个复杂选择器里出现了多少个子选择器，并且给子选择器分类，再按照上方的优先级去做顺序排列，举例：

• 当两个复杂选择器中，第一个中有1个id选择器1个类选择器，第二个有1个类选择器1个标签选择器，那么第一个优先级最高
• 当两个复杂选择器中，第一个有1个类选择器，第二有2个类选择器，那么d优先级第二个优先级最高
• 当两个复杂选择器一样，那么哪个写在最后谁优先级最高

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

• :link选择器对指向未被访问页面的链接设置样式

• :hover选择器用于设置鼠标指针浮动到链接上时的样式

• :active选择器用于选择活动链接。当在点击一个链接时，它就会成为活动的（激活的）

• :visited选择器 用于设置指向已访问页面的链接

原因：

1. 同级选择器，排在最下面的会覆盖上面的选择器
2. 未访问链接时，a:link会显示出来，当鼠标浮动在链接上时想要a:hover显示出来，a:hover应该排在a:link下面
3. 当访问过链接后，想要鼠标浮动在链接上时a:hover效果也会显示，a:hover也应该在a:visited下面
4. 当点击链接时a:active效果会显示，并且无论是访问过或未访问过的链接，点击时都要显示a:active的效果，因此a:active优先级最高

综上所述，优先级顺序应该为：a:link>a:visited>a:hover>a:active

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

• #header{}id选择器，选择id值为header的元素
• .header{}class选择器，选择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{}d值为header元素后代中class值为logo元素之后的同级p元素

#header input[type="text"]{}d值为header元素后代中type属性为”text"的input元素

列出你知道的伪类选择器

div:first-child和div:first-of-type的作用和区别

• div:first-child div元素下的第一个子元素
• div:first-of-type父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)

运行如下代码，解析下输出样式的原因

<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>

• .item1:first-child 选择的是item1下的第一个子元素aa字体为红色
• .item1:first-of-type 选择是item1下的子元素中同一标签下的第一个元素，因此选择了aa和bb背景为蓝色

输出结果如下

输出结果