任务7

1.class 和 id 的使用场景?

• class在一个html标签中可以有很多个相同的class,但是id的话一个HTML标签只能有相同的一个。

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

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

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

• 优先级从高到低分别是：
  1.在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
  2.作为style属性写在元素标签上的内联样式
  3.id选择器
  4.类选择器
  5.伪类选择器
  6.属性选择器
  7.标签选择器
  8.通配符选择器
  9.浏览器自定义
  复杂场景计算，行内样式 <div style="xxx"></div>为a类;ID 选择器为b类;类，属性选择器和伪类选择器为c类;标签选择器、伪元素为d类，复杂场景之中会从a类数量开始比较，若相同则会顺延到b类继续比较，以此类推，若是都相同则是后覆盖前。

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

• 顺序为a:link ->a:visited -> a:hover -> a:active,这是一个样式覆盖的问题,一个标签，首先他是未被选中的（a:link），然后鼠标才会悬浮在它上面（a:hover），然后才会被点击（a:active），然后他的状态才会变成未选中之后（ a:visited）。而只要元素被点击之后，visited会是永久生效的，而这时如果visited放在最后，他会覆盖掉前面的属性。

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

#header{
} ------  选择id为header的元素
.header{
} ------  选择class为header的元素  
.header .logo{
} ------ 选择class为header的元素后代中class为logo的元素
.header.mobile{
} ------ 选择class为header的元素和class为mobile的元素
.header p, .header h3{
} ------ 选择class为header的元素后代中的p元素和h3元素
#header .nav>li{
} ------ 选择id为header的元素后代中class为nav的元素的直系子元素中的li标签
#header a:hover{
} ------ 选择id为header的元素后代中a标签被鼠标选中的状态
#header .logo~p{
} ------ 选择id为header的元素后代中class为logo后的所有是p标签的同级元素
#header input[type="text"]{
} ------ 选择id为header的元素后代中type属性为text的input元素

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

选择器	含义
E:first-child	匹配作为长子（第一个子女）的元素E
E:link	匹配所有未被点击的链接
E:visited	匹配所有已被点击的链接
E:active	匹配鼠标已经其上按下、还没有释放的E元素
E:hover	匹配鼠标悬停其上的E元素
E:focus	匹配获得当前焦点的E元素
E:lang(c)	匹配lang属性等于c的E元素
E:enabled	匹配表单中可用的元素
E:disabled	匹配表单中禁用的元素
E:checked	匹配表单中被选中的radio或checkbox元素
E::selection	匹配用户当前选中的元素

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子元素便可。
• div :first-child:匹配div标签后代中所有父元素的第一个子元素。
• div :first-of-type:匹配div标签后代中同类型第一个子元素。
  上面两个的不同点在于，第一个选择器选择的必须是第一个子元素，所以同级元素中只会被选择一个，但是第二个选择器选择的是同类型的第一个子元素，同级元素中可以有多个。

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>

输出的样式为

image.png

• 原因是因为:.item1:first-child选则的是作为第一个父元素的子元素且class名是item1的元素，所以只有aa变成红色，而.item1:first-of-type选择的是class名为item1且是父元素下同类型的第一个子元素，aa是其父元素下第一个p标签，而bb是其父元素下第一个h3标签，都会被选中