1.class 和 id 的使用场景?

• id：id选择器，使用#name定义（name为id名，可任意取名），使用id="name"调用，其优先级高于类选择器，一个标签只能有一个id且每个id只能使用一次，多用于页面分块的块级标签上；
• class：类选择器，使用.name定义（name为类名，可任意取名），使用class="name"调用，一个标签可以有多个类且同一个类可以用到不同的标签上，多用于多个标签样式相似或完全相同时。

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

1. 基础选择器
2. 组合选择器
3. 属性选择器
4. 伪类选择器
5. 伪元素选择器

• 基础选择器：

• 组合选择器：

• 属性选择器：

• 伪类选择器:

• 伪类选择器:

• 伪元素选择器:

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

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

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

• 根据组合选择器按照以下规则统计各类选择器的个数：

- 行内样式 --> 统计为a
- ID选择器 --> 统计为b
- 类、属性选择器、伪类选择器 --> 统计为c
- 标签选择器、伪类选择器 --> 统计为d

• 先比较a值的大小，a值大的则优先级高;如果a值相等，则再比较b值的大小，b值大的优先级高；如果b值相等，则比较c值的大小，c值大的优先级高；如果c值相等，则比较d值的大小，d值大的优先级高；

选择器                                               统计值                     
style="color: red"                                 a=1, 0, 0, 0                   
#id {}                                             0, b=1, 0, 0    
#id #aid                                           0,b= 2, 0, 0    
.sty {}                                            0, 0, c=1, 0    
.sty p[title=""] {}                                0, 0, c=2, 0    
p:hover {}                                         0, 0,c= 1, 0    
p {}                                               0, 0, 0,d= 1    
ul::after {}                                       0, 0, 0, d=1    
div p {}                                           0, 0, 0,d= 2

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

• 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
• 在 CSS 定义中，a:active 必须被置于 a:hover 之后(如果没有a:hover则必须被置于 a:link 和 a:visited 之后)，才是有效的。

正确的顺序为a:link、a:visited、a:hover、a:active (其中，link和visited可以互换)

原因：

• 当鼠标移动到a标签上，此时与标签颜色相关的选择器有：a:link,a:visited,a:hover,这三个选择器,被写在最后的选择器会覆盖掉之前的选择器，要想实现“a:hover”的效果，需要将a:hover置于 a:link 和 a:visited 之后。
• 当鼠标点击a标签，此时与标签颜色相关的选择器有：a:link,a:visited,a:hover和a:active，这四个选择器,被写在最后的选择器会覆盖掉之前的选择器，因此要想实现“a:active”的效果，需要将a:active置于a:link,a:visited,a:hover 之后。

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

#header{ } /*id选择器，匹配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元素鼠标悬浮在其表面时的样式*/

• 列出你知道的伪类选择器：

• div:first-child和div:first-of-type的作用和区别：

  • div:first-child：父元素的第一个子元素且必须符合指定类型（为div）
  • div:first-of-type：匹配的是其父元素下相同类型子元素中的第一个，不一定只有一个子元素，而是在父元素下不同标签的第一个子元素；

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

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

结果

分析：

1. .item1:first-child ：class为item1的元素为 <p class="item1">aa</p>、<h3 class="item1">bb</h3>、<h3 class="item1">ccc</h3>，父元素为<div class="ct">，该div的第一个子元素为<p class="item1">aa</p>，因此aa为红色

2. .item1:first-of-type ：class为item1的元素为<p class="item1">aa</p>、<h3 class="item1">bb</h3>、<h3 class="item1">ccc</h3>，父元素为<div class="ct">，该div的第一个<p>子元素为<p class="item1">aa</p>，所以aa背景蓝色，该div的第一个<h3>子元素为<h3 class="item1">bb</h3>，所以bb背景蓝色，而<h3 class="item1">ccc</h3>为该div的第二个<h3>子元素，非同类第一个元素，因此ccc没有背景蓝色。