class 和 id 的使用场景?、

id选择器为整个页面中唯一的
class选择器可以重复使用，对有相同属性的标签可以起相同的class名

CSS选择器常见的有几种?

1.基础选择器
2.组合选择器
3.属性选择器
4.伪类选择器
5.伪元素选择器

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

优先级：id选择器>类选择器>伪类选择器>属性选择器>标签选择器>通配符选择器
复杂场景计算选择器的权重，权重的比重大小与优先级相同。
！important优先级为最高

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

顺序为LHAV方便记忆可记为LOVE
未点击链接前，link伪类长期处于激活状态，鼠标悬停（或点击）时，链接同时处于link和hover(或active)状态，由于它们特指度相同，在同时激活的情况下，后出现的伪类样式会覆盖前面的伪类样式，故link状态必须写在hover(或active)之前。再讨论hover和active的顺序，若把hover放在active后面，当点击链接一瞬，实际你在激活active状态的同时触发了hover伪类,hover在后面覆盖了active的颜色，所以无法看到active的颜色。故hover在active之前其次，若把visited放在hover后面，那已访问过的链接一直触发着visited伪类，会覆盖hover样式。

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

#header{}     id选择器，匹配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{}    子元素选择器，选择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里的所有类型为"text"的inpute标签```
#列出你知道的伪类选择器

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 匹配用户当前选中的元素```

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

：first-child匹配的是其父元素的第一个子元素；
：first-of-type匹配的是其父元素下相同类型子元素中的第一个，不一定只有一个子元素，而是在父元素下不同标签的第一个子元素；
运行如下代码，解析下输出样式的原因。

.item1:first-child{
  color: red;
}                                   /*父元素下第一个子元素为aa所以aa的颜色是红的
.item1:first-of-type{
  background: blue;
}                                   /*父元素下拥有相同标签的第一个元素；p标签下为 aa；h3标签下为bb；所以aa和bb的背景色为蓝色

 
   aa
   bb
   ccc
 
```

CSS选择器