1. class 和 id 的使用场景

• id 指定标签的唯一标识
  根据提供的唯一id号，快速获取标签对象
  用于充当label标签for属性的值：示例：<label for='userid'>用户名：</label>，表示单击此label标签时，id为userid的标签获得焦点
• class 指定标签的类名
  CSS操作，把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类

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

1.基础选择器

2.组合选择器

3.属性选择器

4.伪类选择器

5.伪元素选择器

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

优先级从高到低依次为

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

对于复杂的场景，把选择器分为如下四种情况

然后统计每个选择器合集的等级分布
再按照abcd依次比较，先比a，如果数量相同，再比b，依次推导，如果完全相同，顺序在后面的优先

5. 练习题

(1). 以下选择器分别是什么意思?

| 选择器 | 作用 |
|-| |
| #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的元素中处于hover状态的子元素a |
| #header .logo~p{} | 选择id为header的元素中，class为logo的元素之后所有的同级的p元素|
| #header input[type="text"]{}| 选择id为header的元素中所有type="text"的input元素 |

(2). 列出你知道的伪类选择器?

:active
:any
:checked
:default
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:focus
:hover
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
:visited

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

作用:

|选择器|作用|
|-||
|div:first-child |选择满足既为div同时又是兄弟元素中第一个的元素|
|div:first-of-type |选择满足既为div同时又是同类兄弟元素中第一个的元素 |
|div :first-child |选择所有div元素中的第一个子元素 |
|div :first-of-type |选择所有div元素的子元素中每一类的第一个子元素 |

区别:

|选择器|作用|
|-||
|:first-child| 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。|
|first-of-type|匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。|

(4). 运行如下代码，解析下输出样式的原因

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

.item1:first-child 选择的是class名为item1的同级元素中的第一个，所以只选中<p class="item1">aa</p>
而.item1:first-of-type选中的是class名为item1的同级且同类元素中的第一个，因此<p class="item1">aa</p>和<h3 class="item1">bb</h3>均被选中