任务7

1、class 和 id 的使用场景?

• class是将一类元素的样式抽取出来，它可以管控多个元素的样式；如果要为两个元素或者两个以上元素定义相同的样式，建议使用class属性。
• id是唯一的，控制单个元素的样式。如果一个页面出现了多个相同id属性取值，CSS选择器或者JavaScript就会因为无法分辨要控制的元素而最终报错。

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

• 元素选择器
  就是“选中”相同的元素，然后对相同的元素设置同一个CSS样式。

• id选择器
  我们可以为元素设置一个id，然后针对这个id的元素进行CSS样式操作。注意，在同一个页面中，不允许出现两个相同的id，这个就像没有哪两个人的身份证号是相同的道理。

PS：id名前面必须要加上前缀“#”，否则该选择器无法生效。id名前面加上“#”，表明这是一个id选择器。

• class选择器：class选择器，也就是“类选择器”。可以对“相同的元素”或者“不同的元素”设置一个class（类名），然后针对这个class的元素进行CSS样式操作。

class名前面必须要加上前缀“.”（英文点号），否则该选择器无法生效。类名前面加上“.”，表明这是一个class选择器。

• 子元素选择器
  子元素选择器，就是选中某个元素下的子元素，然后对该子元素设置CSS样式。

PS：父元素与子元素必须用空格隔开，从而表示选中某个元素下的子元素。

• 相邻选择器
  就是选中该元素的下一个兄弟元素，在这里注意一点，相邻选择器的操作对象是该元素的同级元素。

• 群组选择器
  群组选择器，就是同时对几个选择器进行相同的操作。常常，我们的CSS 样式中会有好几个地方需要使用到相同的设定时，一个一个分开写会是一件满累人的工作，重覆性太高且显得冗长，更不好管理....在CSS 语法的基本设定中，就可以把这几个相同设定的选择器合并在一起，原本可能是写了7~8 行相同的语法，合在一起后就只要短短的一小行

PS：对于群组选择器，两个选择器之间必须用“,”（英文逗号）隔开，不然群组选择器无法生效。

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

• 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
• 作为style属性写在元素标签上的内联样式
• id选择器
• 类选择器
• 伪类选择器
• 属性选择器
• 标签选择器
• 通配符选择器
• 浏览器自定义
• 复杂场景优先级计算
• 从最高权重开始比较，相同则比较下一个权重，权重高的优先级高于权重低的

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

a:link > a:visited > a:hover > a:active
如果visited写在active后面，当a标签被点击之后，visited的样式会覆盖其他样式，导致其他样式都不生效

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

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

• E:first-child：匹配元素E的第一个子元素
• E:nth-child：匹配元素E的第n个子元素
• E:enabled和E:disabled：匹配元素E的状态为可用/不可用
• E:checked和E:selection：匹配元素E的状态为单选框选中/复选框选中
• a:link：未被点击的链接
• a:visited：已被点击的链接
• a:hover：鼠标悬停其上的链接
• a:active：鼠标已经按下，但没有释放的链接

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

• div:first-child：匹配div父元素的第一个子元素。
• div:first-of-type：匹配div父元素下使用同种标签的第一个子元素。有多少种不同的标签就会匹配到多少个子元素。

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

• .item1:first-child——
  选择.item1的父元素即.ct的第一个子元素，是其自身。所以aa字体变红。

• .item1:first-of-type——选择.item1的父元素即.ct的拥有相同标签的第一个子元素。所以aa和bb背景色变蓝。