class 和 id 的使用场景?

id:id选择器,使用#name命名，一个标签只能有一个id且每个id只能使用一次，多用于页面分块的块级标签上； #content{css样式} <div id="content"></div> 权限高，慎用
class:类选择器 使用.name命名，一个标签可以有多个类且同一个类可以用到不同的标签上，多用于多个标签样式相似或完全相同时； .content {css样式} <div class="content"></div>

CSS选择器常见的有几种?

1. 基础选择器
   * 通用选择器,匹配页面任意元素
   #id id选择器,匹配特定id的元素
   .class 类选择器,匹配class包含(不是等于)特定类的元素
   element 标签选择器
2. 组合选择器
   E,F 多元素选择器，用,分隔，同时匹配元素E或元素F
   E F 后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F
   E>F 子元素选择器，用>分隔，匹配E元素的所有直接子元素
   E+F 直接相邻选择器，匹配E元素之后的相邻的同级元素F
   E~F 普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）
   .class1.class2 id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素
   element#id id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素
3. 属性选择器
   E[attr] 匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div
   E[attr = value] 匹配属性attr值为value的元素，div[id=test],匹配id=test的div
   E[attr ~= value] 匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素
   E[attr ^= value] 匹配属性attr的值以value开头的元素
   E[attr $= value] 匹配属性attr的值以value结尾的元素
   E[attr *= value] 匹配属性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 匹配用户当前选中的元素
   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)
5. 伪元素选择器
   E::first-line 匹配E元素内容的第一行
   E::first-letter 匹配E元素内容的第一个字母
   E::before 在E元素之前插入生成的内容
   E::after 在E元素之后插入生成的内容

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

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

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

行内样式 <div style="xxx"></div> ==> a
ID 选择器 ==> b
类，属性选择器和伪类选择器 ==> c
标签选择器、伪元素 ==> d

#ct .box p {} /* a=0 b=1 c=1 d=1 -> 0,1,1,1 /
div#header:after {} / a=0 b=1 c=0 d=2 -> 0,1,0,2 */

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

a:link，定义正常链接的样式；
a:visited，定义已访问过链接的样式；
a:hover，定义鼠标悬浮在链接上时的样式；
a:active，定义鼠标点击链接时的样式。
没有规矩不成方圆，虽然链接定义写好了，但它也是有规则的，如果这四项的书写顺序稍有差错，链接的效果可能就没有了，所以每次定义链接样式时务必确认定义的顺序，link--visited--hover-active，也就是我们常说到的LoVe HAte原则（大写字母就是它们的首字母）。

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

#header{} 匹配id为header的元素
.header{} 匹配类为header的元素
.header .logo{} 匹配类为header的子元素的类为logo的元素
.header.mobile{} 匹配同时具有class名为header和class名为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的标签是input的属性type=text的元素

列出你知道的伪类选择器

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所以效果和第一个一样
div :first-child 匹配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>

:first-child 命名item1的类的父类的第一个子元素是红色,所以p标签的字是红色
:first-of-type 匹配父元素下使用同种标签的第一个子元素,所以类父类下类为itme1的有p和第一个h3