1.class 和 id 的使用场景?

• class用于主区块里面的详细内容，同一个class可以重复出现，一个标签可以有几个不同的class。
• id多使用于主要块级元素，同一个id一个页面中只能出现一次，有些独一无二元素也可用id。

2.CSS常见选择器

• 通配符选择器（＊）
• id选择器（#ID）
• 类选择器（.className）
• 元素选择器(E)
• 后代选择器（Ｅ Ｆ）
• 子元素选择器(E>F)
• 相邻兄弟元素选择器(E + F)
• 兄弟元素选择器(E ~ F)
• 群组选择器（selector1,selector2,...,selectorN）
• 属性选择器（E[attr]）更多属性选择器
• 伪类选择器（E:hover）更多伪类选择器
• nth选择器(E:nth-child(an + b)) 更多相关知识
• 伪元素选择器（E::before）更多伪元素选择器

3.选择器的优先级问题

• css选择器优先级是根据权重计算的。
  • ID选择器权值为100
  • 类选择器、属性选择器、伪类选择器权值为10
  • 标签选择器、伪元素选择器权值为1
  • 相应的权值相加即可，最后根据结果排出优先级
• 除权重外还有些其他规则。
  • 行内样式 》 内部样式表 》外部样式表
  • 权值相同的，后定义的优先级较高
  • 样式值含有！important，优先级最高

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

• 顺序为a:link > a:visited > a:hover > a:active
• 原因：
  • 鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；
  • 鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；
  • a:active是鼠标点击与释放之间发生的事件，并拥有鼠标悬停a:hover属性；
  • 由于伪类的选择器优先级一致，后面的a链接样式会覆盖前面的。
  • 所以: a:link > a:visited > a:hover > a:active。

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

<pre>

1. 选择ID为header的元素

header{

}

2. 选择class为header的元素
   .header{
   }
3. 选择class为header的元素的后代元素中class为logo的元素
   .header .logo{
   }
4. 选择同时有header和mobile两个class的元素
   .header.mobile{
   }
5. 选择class为header的元素的后代元素中的p元素和h3元素
   .header p, .header h3{
   }
6. 选择class为header的元素的后代元素中class为nav的元素的子元素中的li元素

header .nav>li{

}

7. 选择class为header的元素的后代元素中a元素的hover伪类

header a:hover{

}

8. 选择class为header的元素的后代元素中的class为logo的元素的所有它后面的兄弟元素中为p的元素

header .logo~p{

}

9. 选择class为header的元素的后代元素中的所有input元素中type属性为text的元素

header input[type="text"]{

}
</pre>

6. 伪类选择器有哪些

• :active、:foucs、:hover、:link、:visted、:first-child、:lang

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

• div:first-child：如果div是它父元素的第一个子元素则匹配，否则不能匹配
• div:first-of-type：匹配div的父元素下的第一个div元素
• div :first-child：匹配div元素的后代中的第一个元素
• div :first-of-type：匹配div元素的后代中所有出现的第一种元素

8. 解析代码：

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

• 因为class为item1的元素的父元素下的第一个元素的class为item1，所以这个元素被选中，aa的颜色变为红色。
• 因为class为item1的父元素下有两种元素，所以这两种元素中的第一个出现的元素被选中，所以aa和bb所在的元素的背景色变为蓝色。