class 和 id 的使用场景?

• class：指定标签的类名，可以把多个类，放在一个class属性里，但必须用空格隔开
  格式：<input type=button class="btnsubmit" />
  应用场景：

• CSS操作，把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类

• id：指定标签的唯一标识
  格式：<input type=password id="userpwd" />
  应用场景：

• 根据提供的唯一id号，快速获取标签对象。如：document.getElementById(id)

• 用于充当label标签for属性的值：例如<label for='userid'>用户名：</label>，表示单击此label标签时，id为userid的标签获得焦点

CSS选择器常见的有几种?

• 基础选择器

• 组合选择器

• 属性选择器

• 伪类选择器

• 伪元素选择器

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

• css优先级从高到低分别是：

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

• 复杂场景中
  选择器的特殊性分为4个等级，a b c d，从左到右，越左边的越优先, 如果一个选择器规则有多个相同类型选择器，则+1。
  如果是HTML行内样式，那么特殊性最优先 a
  id选择器的特殊性是 b
  类选择器、伪类选择器、属性选择器为 c
  标签选择器、伪元素选择器为 d
  例如：

 *             {}  /* a=0 b=0 c=0 d=0 -> 0,0,0,0 */
p             {}  /* a=0 b=0 c=0 d=1 -> 0,0,0,1 */
a:hover       {}  /* a=0 b=0 c=1 d=1 -> 0,0,0,2 */
ul li         {}  /* a=0 b=0 c=0 d=2 -> 0,0,0,2 */
ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> 0,0,0,3 */
h1+input[type=hidden]{}  /* a=0 b=0 c=1 d=2 -> 0,0,1,1 */
ul ol li.active   {}  /* a=0 b=0 c=1 d=3 -> 0,0,1,3 */
#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 */
style=""              /* a=1 b=0 c=0 d=0 -> 1,0,0,0 */

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

• 顺序：链接未被点击前，a:visited是不生效的，它表示链接被点击之后的变化，所以在链接未被点击前，a:hover在链接被鼠标滑过时展现选择器内设置的效果。a:active表示鼠标点击时产生的效果，因此在点击时，链接显示为a:active选择器内设置的效果，当点击完毕后，a:visited把已经点击过的此链接永远的展示成选择器内设置的效果。所以此时不能将a:visited这个选择器顺序写在这四个选择器的最后，因为这样的话，当一个链接被点击后，用鼠标再指向它，它不会有任何的变化，这不是我们想要的结果，所以应该将a:visited这个选择器放到a:hover选择器的前面，使得鼠标无论在链接点击前还是点击后指向链接都可以有颜色或其他效果变化，告诉用户此链接正在被其关注。而a:active和a:visited的先后顺序取决于我们是否希望链接在被点击后，再次被点击要不要产生变化，若是，就讲a:active写在a:visited的后面，否则，可将a:visited写在a:active后面。最后是a:hover和 a:active的顺序，这两种选择器控制的是a链接的不同状态，所以他们之间的顺序不影响效果展示。其最理想的顺序为：a:link, a:visited,a:hover, a:active。
• link、hover、active、visited都是伪类选择器，从选择器类型中看优先级处于同一级别，这时后定义的会覆盖先定义的。但一个链接可能同时处于多种状态，即同时属于多个伪类

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

#header{
}//匹配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的元素的所有后代中type类型为text的input元素

列出你知道的伪类选择器
div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）

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

<style>
.item1:first-child{
  color: red;
}/*匹配其父元素下第一个子元素，并且其class属性必须为item1的元素*/
.item1:first-of-type{
  background: blue;
}/*匹配父元素下每一种元素的第一个class属性为item1的元素*/
</style>
 <div class="ct">
   <p class="item1">aa</p>/*是其父元素div下的第一个子元素，并且class为item1，所以aa输出为red*/
                          /*是其父元素div下的第一个p元素，并且其clas为item1，所以它的背景色为蓝色*/
   <h3 class="item1">bb</h3>/*是其父元素div下的第一个h3元素，并且其clas为item1，所以它的背景色为蓝色*/
   <h3 class="item1">ccc</h3>
 </div>