任务8

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

• id选择器
• class选择器
• 属性选择器
• 分组选择器
• 派生选择器
• 伪类选择器
• 组合选择器
• 通配选择器

2.选择器的优先级是怎样的?

• 从高到低分别是：
• 在属性后面使用！important会覆盖页面内任何位置定义的元素样式，全局优先级最高
• 作为style属性写在元素标签上的内联样式
• id选择器
• 类选择器
• 伪类选择器
• 属性选择器
• 标签选择器
• 通配符选择器
• 浏览器自定义

3.class 和 id 的使用场景?

头部，内容区域，尾部等主体内容用id，有时js特效类需要唯一性，这个时候需要使用“id”，而主体内容的子容器或可复用的样式用class。

4.使用CSS选择器时为什么要划定适当的命名空间？

• 保持可维护性
• 多人合作时避免和他人命名产生冲突
• 可以使代码具有可读性，更有语义化并且便于写代码和调试代码
• 避免因为命名不规范而导致出错

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

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

• E:first-child -> 匹配元素E的第一个子元素
• E:last-child -> 匹配父元素的最后一个子元素
• E:first-of-type -> 匹配父元素下使用同种标签的第一个子元素
• E:nth-last-child(n) -> 匹配其父元素的倒数第n个子元素，第一个编号为1
• E:only-child -> 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
• E:first-of-type -> 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
• E:last-of-type -> 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
• E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素
• E:nth-last-of-type(n) -> 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
• E:only-of-type -> 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
• E:link -> 匹配所有未被点击的链接
• E:visited -> 匹配所有已被点击的链接
• E:active -> 匹配鼠标已经其上按下、还没有释放的E元素
• E:hover -> 匹配鼠标悬停其上的E元素
• E:focus -> 匹配获得当前焦点的E元素
• E:empty -> 匹配一个不包含任何子元素的元素，文本节点也被看作子元素
• E:not(selector) -> 匹配不符合当前选择器的任何元素

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

• :first-child选择某父元素下第一个子元素。
• :first-of-type选择某父元素下所有相同类型的子元素，其中排第一的那个子元素，也可以说是是父元素下相同类型子元素中的第一个。

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

输出后的样式为：

• .item1:first-child定义了aa为红色字体。因为:first-child只匹配首个子元素。
• .item1:first-of-type定义了aa和bb的背景为蓝色。因为:first-of-type匹配子元素该类型的第一个，aa为第一个P，bb为第一个h3。

9.text-align:center的作用是什么，作用在什么元素上？能让什么元素水平居中？

span是行内元素，定义span的样式为居中，但是浏览后的页面如下图所示：

但是如果我在行内元素span的样式里加一个display:bolok;块级元素，如下所示：

浏览后的页面：

我们发现样式居中生效了。

由此可以得出结论如下：
text-align:center

• 作用：使元素水平居中。
• 作用在块级元素上。
• 能块级元素内部的行内元素居中。

10.如果遇到一个属性想知道兼容性，在哪查看?

用caniuse来查看