1.class 和 id 的使用场景?

• id：定位到页面上唯一的元素，页面上不能出现id相同的元素
• class：定位到页面上某一类的元素

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

• 基础选择器

不要随便使用标签选择器

• 组合选择器

• 属性选择器

• 伪类选择器

• 伪类选择器

• 伪元素选择器

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

1.CSS优先级从高到低分别是:

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

2.对于复杂场景如何计算

1. 首先做出以下定义
   • 行内样式 <div style="xxx"></div> ==> a
   • ID 选择器 ==> b
   • 类，属性选择器和伪类选择器 ==> c
   • 标签选择器、伪元素 ==> d
2. 根据以上定义分析选择器，得出a,b,c,d的值
3. 比较各选择器a,b,c,d的值，先比较a的值，a的值大的优先级高，a的值相等的情况下比较b的值，以此类推，得到各选择器的优先级。

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

• 顺序

  a:link a:visited a:hover a:active

• 原因
  1. 当链接被访问后，a:visited选择器内的样式会永久生效，若a:visited选择器位于a:hover和a:active选择器后面的话，他们的样式将会被永久覆盖，不会生效。
  2. a:active选择器必须位于a:hover选择器后面，否则其样式会被a:hover选择器的样式覆盖

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

#header{            
}                       匹配id名为header的元素                

.header{
}                       匹配class名为header的元素

.header .logo{      
}                       匹配class名为header的元素后代中所有id名为logo的元素

.header.mobile{
}                       匹配class既是header的又是mobile的元素

.header p, .header h3{
}                       匹配class名为header的元素后代中标签为p的元素和h3的元素

#header .nav>li{         
}                  匹配id名为header的后代中class名为nav的元素下的直接子元素

#header a:hover{ 
}                   匹配id名为header的后代中a链接鼠标指针放到链接上的样式

#header .logo~p{
}                   匹配id名为header的后代中class名为logo的同级标签为p的元素

#header input[type="text"]{
}                   匹配id名为header的后代中标签为input且属性为text的元素

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

7.div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）

• div:first-child：匹配当前div所在层级的第一个元素【该元素必须是div，若div不是第一个元素，则无效果】
• div:first-of-type：匹配div所在层级中所有div元素中的第一个
• div :first-child：匹配标签为div元素下的第一个子元素，相当于组合选择器和伪类选择器的组合，即是div元素的所有后代元素（不只是子元素、子元素向下递归中是其父元素第一个子元素）
• div :first-of-type：匹配标签为div元素下的相同标签的第一个元素，分析同上

其实伪类选择器也可以看作是组合选择器，比如'div:first-of-type'就可以理解为即符合条件1，既是div元素，又符合条件2，即是其父元素的第一个孩子。比如'div>:first-child'可以理解匹配为div元素中的所有直接子元素中，符合是其父元素的第一个孩子条件的
demo

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>

• 结果

  
  
  运行结果.PNG

• 原因

  • .item1:first-child匹配class名为item1的父级元素的第一个子元素，即< p class="item1">aa< /p>，所哟aa变为字体变为红色
  • .item1:first-of-type匹配class名为item1的父级元素的标签不同的元素，即< p class="item1">aa< /p>,< h3 class="item1">bb< /h3>,所以它们的背景颜色变为蓝色