CSS选择器

class 和 id 的使用场景?

ID具有唯一性，Class具有普遍性。
ID是唯一的，所以尽量在结构外围使用，通常用于页面布局。
Class是可重复的，所以尽量在结构内部使用，通常用于样式定义。
除非用于锚定位。否则请将id从css和js手中还给html和url。

CSS选择器常见的有几种?

种类分为
基础选择器
组合选择器
属性选择器
伪类选择器
伪元素选择器
常用的有如下

基础选择器
组合选择器
属性选择器


伪类选择器
伪元素选择器

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

优先级

行内样式 <div style="xxx"></div> ==> a
ID 选择器 ==> b
类，属性选择器和伪类选择器 ==> c
标签选择器、伪元素 ==> d
当先看a，a权重相等时比较b，b相等时比较c，c相等时比较d

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

顺序如下，因为标签多个样式生效的时候，后出现的样式会覆盖先前出现过的样式。

a{
}
a:visited{
}
a:hover{
}
a:active{
}

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

#header{ // ID 为header的元素
}
.header{ // 类名含有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的元素下状态为hover的a标签元素
}
#header .logo~p{ // ID 为header的元素下类名含有logo的元素之后的标签为p的同级元素
}
#header input[type="text"]{  //ID 为header的元素下type属性=text的input元素
}

列出你知道的伪类选择器

伪类选择器

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>元素内所有元素中属于其父元素的首个该类型的子元素
（快绕晕了T T）

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

<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意为选择.item选择的元素的父元素下第一个子元素
即<p class="item1">aa</p>
设置样式color: red;
.item1:first-of-type意为选择.item选择的元素的父元素下每个类别的元素的第一个
即
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
设置样式background: blue;