1.class 和 id 的使用场景?

• id：id在一个页面中是全局唯一的，一个标签只能有一个id，多用于块级标签。使用"#"选择
• class：class在一个页面可以有多个，一个标签可以有多个class，多用于多个标签样式相似或相同时。使用"."来选择

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

• 基础选择器

Paste_Image.png

• 组合选择器

Paste_Image.png

• 属性选择器

Paste_Image.png

• 伪类选择器

Paste_Image.png

• 伪元素选择器

Paste_Image.png

• E:first-child 匹配一个元素为E且该E元素为老大哥

<style>
.poi>.item1:first-child{
  color: red;
}
  
.item3:first-child{
  color: blue;
}

</style>
 <div class="ct">
   <h3 class="item3">aa</p>
   <h3 class="item2">bb</h3>
   <h3 class="item1">ccc</h3>
 </div>
 <div class="aw">
   <h3 class="item1">aa</p>
   <h3 class="item2">bb</h3>
   <h3 class="item3">ccc</h3>
 </div>
 <div class="aw">
    <div class="poi">
     <h3 class="item1">aa</p>
     <h3 class="item2">bb</h3>
     <h3 class="item3">ccc</h3>
     </div>
 </div>

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

3.1 优先级：

1. ！important
2. 内联样式
3. id
4. class
5. 伪类
6. 属性
7. 元素
8. 伪元素
9. 浏览器自定义

3.2 复杂场景

a：内联样式
b：id
c： class、属性、伪类
d： 元素、伪元素

比较方法：a>b>c>d，当优先级相同时，计算同一级的个数，个数多的优先级大

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

1. a:link
2. a:visited
3. a:hover
4. a:active

原因：

1. 首先优先级相同时，后定义的覆盖前面定义的
2. 静态在前，动态在后，所以link和visited在前，hove和active在后
3. 根据动作的先后顺序，所以link在visited前，hover在active之前。

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

#header{ 
//选择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中后代为nav的li子元素
}
#header a:hover{
//选择id=header中后代鼠标悬停的a元素
}
#header .logo~p{
//选择id=header中后代id=logo之后的同级p元素
}
#header input[type="text"]{
//选择id=header中后代具有type属性为“text”的input元素
}

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

• E:first-child
• E:link
• E:visited
• E:active
• E:hover
• E:focus
• E:lang(c)
• E:enabled
• E:disabled
• E:checked
• E:selection

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

• first-child：匹配其父元素的第一个子元素
• first-of-type：匹配其父元素下的不同类型的第一个子元素

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

<style>
.item1:first-child{
  color: red;
//匹配class="ct"中的<p class="item1">
}
.item1:first-of-type{
  background: blue;
//匹配class="ct"的 <p class="item1">和<h3 class="item1">
}
</style>
 <div class="ct">
   <p class="item1">aa</p>
   <h3 class="item1">bb</h3>
   <h3 class="item1">ccc</h3>
 </div>