class和id的使用场景？
class选择器：又叫做类选择器，即给多个元素添加相同样式时，使用class选择器
id选择器：给一个单独的元素添加样式时，使用ID选择器
CSS选择器常见的有几种？
基础选择器：
1.标签选择器 2.类选择器（class） 3.ID选择器 4.全局选择器（*）
链接伪类选择器：
1.未访问(:link) 2.已访问(:visited) 3.鼠标悬停(:hover) 4.激活(:active)
其他伪类选择器：
- :first-child 相对于父元素的第一个子元素
- :focus 用户正在使用的元素（类似于表单中，正在填写哪个文本域）
- :lang(c) 元素中lang属性为c的元素
- :enabled 表单中可以使用的元素
- :disabled 表单中被禁用的元素
- :checked 表单中radio或者checkbox被选选中的元素
- ::selection 用户当前选中的元素
组合选择器：
- 群组选择器 同时给多个选择器添加样式，每个选择器之间用","隔开
- 后代选择器 给某个元素的某个子元素添加样式，用空格隔开
- 子元素选择器 给a元素下一级所有的b元素添加样式（只包含a元素的下一级的所有b元素，而不是a元素下所有的b元素）
- 直接相邻选择器 a+b 匹配a元素之后的相邻的同级b元素
- 普通相邻选择器 a～b 匹配a元素之后的所有同级b元素（不论相邻否）
其他选择器详解链接
选择器的优先级是怎样的？对于复杂场景如何计算优先级？
简单情况下
image.png
复杂情况下：如下图所示，首先计算a,b,c,d的数值，有a的情况下，不看b,c,d，只比较a的大小。有b的情况下，不看c,d，只看b的大小。同理依次往下（a>b>c>d）
image.png
a:link,a:hover,a:active,a:visited的顺序是怎么样的？为什么？
a:link>a:visited>a:hover>a:active
这4个伪类属于同一级别，所以后写的会覆盖先写的样式。故当a:link必须第一个写，这样当链接出去其他状态时，a:link会被覆盖。对于a:hover和a:active和a:visited，当鼠标点击链接时的那一刻，链接处于3种状态，但需要显示a:active样式，所以a:active放在最后一个写。当鼠标点击链接之后，鼠标悬停链接，要显示a:hover样式，所以a:hover在a:visited之后。
以下选择器分别是什么意思？
- (#header{})
给id为header的元素书写样式 - (.header{})
给class为header的元素书写样式 - (.header .logo{})
给class为header的元素的子元素中class为logo的元素书写样式 - (.header.mobile{})
给class为header的元素的子元素中class为mobile的元素书写样式 - (.header p, .header h3{})
同时给class为header的元素的子元素中p标签和class为header的元素的子元素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的元素的子元素中type属性为text的input标签书写样式
列出你知道的伪类选择器
image.png
div:fitst-child,div:first-of-type,div: first-child和div: first-of-type的作用和区别
- div:first-child：匹配div父元素下第一个子元素是div的元素
- div:first-of-type：匹配div父元素下第一个div元素
- div: first-child：匹配所有div所有子元素中相对于父元素是第一个子元素
- div: first-of-type：匹配所有div所有子元素中相对于父元素是第一次使用的标签
运行如下代码，解析下输出样式的原因
image.png
因为.item:first-child{color:red;}匹配的是.item1父元素.ct下第一个子元素同时class为item的元素，故aa显示为红色。.item:first-of-type{background-color:blue;}匹配的是同种标签中第一个此类标签同时class为item的元素，故bb和ccc的背景颜色为蓝色。
