1.class 和 id 的使用场景?

Id属性值在页面上唯一，用于选择指定元素，class作为类选择器，匹配同一类型的，适用于多个元素有共同的样式

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

• 基础选择器：
  *通用元素选择器，匹配页面的任何元素（这也决定了其很少使用）
  #id id选择器，匹配特定的id元素
  .class 类选择器，匹配class包含（不是等于）特定类的元素
  element 标签 选择器

• 组合选择器
  E,F 多元素选择器，用，分开，同时匹配元素E或元素F
  E F 后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F
  E>F子元素选择器，用>分隔，匹配E元素的所有直接子元素
  E+F 直接相邻选择器，匹配E元素之后的相邻同级元素F
  E~F 普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）
  .class1.class2 id和class选择器连写的时候中间没有分隔符， .和#本身充当分隔符的元素
  Element#id id和class选择器连写的时候中间没有分隔符， .和#本身充当分隔符的元素

• 属性选择器
  E[attr] 匹配所有具有属性attr的元素，div[id]能取到所有有id属性的div
  E[attr=value] 匹配属性attr 值为value的元素，div[id=test]， 匹配id=test的div
  E[attr ~= value] 匹配所有属性attr具有多个空格分隔、其中一个值等于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元素
  E:hover 匹配鼠标悬停其上的E元素
  E:focus 匹配获得当前焦点的E元素
  E:enabled 匹配表单中可用的元素
  E:disabled 匹配表单中禁用的元素
  E:checked 匹配表单中选中的radio或checkbox元素
  E::selection匹配用户当前选中的元素
  E:nth-child（n） 匹配其父元素的第n个子元素，第一个编号为1
  E:nth-last-child（n） 匹配其父元素的倒数第n个子元素，第一个编号为1
  E:nth-of-type（n） 与:nth-child()作用类似，但是仅匹配使用同种标签的元素
  E:nth-last-of-type（n） 与:nth-last-child（）作用类似，但是仅匹配使用同种标签的元素
  E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
  E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)

• 伪元素选择器
  E::first-line 匹配E元素的第一行
  E:: first-letter 匹配E元素内容的第一个字母
  E::before 在E元素之前插入生成的内容
  E::after 在E元素之后插入生成的内容

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

CSS优先级从高到低分别是：

1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2. 作为style属性写在元素标签上的内联样式
3. id选择器
4. 类选择器
5. 伪类选择器0
6. 属性选择器
7. 标签选择器
8. 通配符选择器
9. 浏览器自定义

复杂场景时，有以下规则：

• 行内样式 <div style="xxx"></div> ==> a
• ID 选择器 ==> b
• 类，属性选择器和伪类选择器 ==> c
• 标签选择器、伪元素 ==> d
  然后对于复杂组合选择器，逐一比较a b c d 的值 ，如果a值大则其优先级高，如果小则优先级低，相等则比较b值，以此类推

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

一般顺序应该如此

1. a:link
2. a:visited
3. a:hover
4. a:active
   这样顺序的原因是：选择器优先级别相同时，后面的会覆盖前面的，当链接未被操作时，a:link起作用，当鼠标移动到a链接上的时候，a:hover覆盖a:link起作用，当点击a链接时，a:active覆盖a:link起作用。
   当a链接被点击后，变成已浏览状态，a:visited覆盖a:link起作用，当再次移动到当鼠标移动到a链接上的时候，a:hover覆盖a:visited起作用，当点击a链接时，a:active覆盖a:visited起作用。

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

• #header{ }
  Id选择器，匹配id值为header的元素
• .header{ }
  Class选择器，匹配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元素

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

伪类选择器：利用文档结构树实现元素过滤，通过文档结构的相互关系来匹配特定的元素，从而减少文档内class属性和id属性的定义，使得文档更简洁

E:first-child 匹配元素E的第一个子元素
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:focus 匹配获得当前焦点的E元素
E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中选中的radio或checkbox元素
E::selection匹配用户当前选中的元素
E:nth-child（n） 匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child（n） 匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type（n） 与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type（n） 与:nth-last-child（）作用类似，但是仅匹配使用同种标签的元素
E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)

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

div:first-child div的父元素下的第一个子元素
div:first-of-type div的父元素下第一个div元素

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

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


>![运行结果.png](http://upload-images.jianshu.io/upload_images/1347915-a3e6f8ad8cfcc332.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

解析：`.item1:first-child{  color: red;}` 代表class值为item1的元素的父元素下的第一个子元素的字体颜色为红色，即第一个子元素p为红色，即aa为红色
 `.item1:first-of-type{background: blue;}`代表class值为item1的元素的父元素下的第一个同类型的子元素的背景颜色为蓝色，代码中class值为item1的元素有三个，类型为两种p和h3，p元素对应父元素下的第一个同类型的子元素就是自己，即aa的背景为蓝色。两个h3元素对应父元素下的第一个同类型的子元素就是第一个h3元素，即bb的背景为蓝色