1. class 和 id 的使用场景?

id用于唯一项目；class用于会多次出现，并使用同种样式时使用。

2. CSS选择器常见的有几种?

• 基础选择器
  较为常用的有#id,.class和标签选择器
• 组合选择器
  E,F多元素选择器可以减少代码量
  E F后代选择器遍历选取所有E中的F元素
  E>F 选择E的直接子元素
  E+F 选择紧贴E之后的同级元素F
  E~F E之后的所有兄弟元素F
• 属性选择器

  E[attr]   具有attr属性的元素
  E[attr = value]   attr=value的元素
  E[attr ~= value]  多个空格分隔、其中一个值等于value的元素
  E[attr ^= value]  attr的值以value开头的元素
  E[attr $= value]  attr的值以value结尾的元素
  E[attr *= value]  attr的值包含value的元素

• 伪类选择器

E:first-child E的第一个儿子
E:link 未被点击的链接
E:visited   已被点击的链接
E:active 鼠标按下、还没有释放的元素
E:hover 鼠标悬停时的E元素
E:focus 当前焦点的E元素
E::selection    用户当前选中的元素

• 伪元素选择器

E::first-line   E元素内容的第一行
E::first-letter E元素内容的第一个字母
E::before   在E元素之前插入生成的内容
E::after    在E元素之后插入生成的内容

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

优先级!important><stlye>>id>类选择器>伪类>属性选择器>标签>*
复杂时时，将进行如下分组a(行内样式)>b（ID）>c（类、属性、伪类）>d(标签、伪元素)，a组数目越多，优先级越大，相同时比较下一组，以此类推。

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

a:link，a:visited，a:hover，a:active。
考虑到越后出现的项目会覆盖之前的项目，所以visted要放在hover和active后面，1️⃣保证后面二者正常工作。而鼠标按下时一定悬停，active应在hover后面才能正常工作。

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

* #header{
} id=header的基础选择器

* .header{
} class=header的基础选择器

* .header .logo{
} 同时含有class=header下的class=logo

* .header.mobile{
} 类名同时含有header和mobile的元素

* .header p, .header h3{
}类header内的（p标签和h3标签）

* #header .nav>li{
}id=header内的nav类的直接子元素li

* #header a:hover{
}当鼠标悬停id=header内的a元素上

* #header .logo~p{
}id=header内的logo类之后的所有同级标签p

* #header input[type="text"]{
} id=header 内的类型为text的input元素

6.列出你知道的伪类选择器

E:first-child E的父元素的第一个子元素
E:link 未被点击的链接
E:visited   已被点击的链接
E:active 鼠标按下、还没有释放的元素
E:hover 鼠标悬停时的E元素
E:focus 当前焦点的E元素
E::selection    用户当前选中的元素
E:nth-of-type(n) 匹配E的父元素下的第n个与E同类型的标签
E:nth-child(n)  n可以取具体的数，或者2n+1，odd，even

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

前者为匹配div的父元素的的第一个子元素；后者为匹配div的父元素下使用同种标签的首个子元素。

8.运行下列代码，分析结果。

<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>

屏幕快照 2017-02-19 下午11.22.35.png

首先第一块样式运行时，aa bb cc依次运行相同的样式渲染（因为aa是他们父元素的第一个子元素，aa的字体颜色变红）。
第二块样式被运行时，aa将自己的背景变蓝（aa是其父元素下的第一个同类标签）；而bb cc执行时，运行相同的渲染，将bb背景变蓝（二者类型相同，他们父元素的第一个同类标签都是bb)

@版权所有饥人谷-風逝