饥人谷-任务8

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

• 标签选择器
• 属性选择器
• class选择器
• id选择器
• 伪类选择器
• 后代选择器&直接后代选择器
• 分组选择器
• 通配符选择器

二、选择器的优先级是怎样的?

优先级从高到低：

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

三、class 和 id 的使用场景?

• class：用于概念上相似的元素，可以出现在同一页面上的多个位置。CSS操作，把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类。在结构内部使用，通常用于样式定义。
• id：具有唯一性，用于不同的唯一的元素，在结构外围使用，通常用于页面布局。

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

• 使用语义化的命名便于阅读
• 便于代码的管理与多人协作
• 规范的命名有助于页面渲染

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

#header{}                       /*选中id属性为header的元素*/
.header{}                        /*选中class属性为header的元素*/
.header .logo{}                /*选中class属性为header的元素下的后代中class为logo的元素*/
.header.mobile{}               /*选中class属性同时为header和mobile的元素*/
.header p, .header h3{}        /*选中class属性为header的元素下的后代为p的元素 和 class属性为header的元素下的后代为h3的元素*/
#header .nav>li{}           /*选中id属性为header的元素下的子元素class为nav的元素下的一级子元素为li的元素*/
#header a:hover{}          /*选中id属性为header的元素下的子元素a的hover伪类*/

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

• :first-child
• :last-child
• :hover
• :link
• :active
• :focus
• :visited
• :nth-child(n)
• :nth-of-type(n)
• :first-of-type
• :last-of-type

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

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

八、

代码运行

• .item1:first-child{color: red;} 这个说明选中的child是结构上第一个class为item1的，因此被选中的就只有内容为aa的item1元素，所以aa显示红色；
• .item1:first-of-type{background: blue; }这个说明被选中的child是所有同类型的第一个class为item1的元素，因为p和h3是不同类型，所以会选择不同类型的第一个，因此aa和bb的背景都为蓝色；

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

• 作用就是使文本水平居中，作用在块级元素上
• 可让文字、图片、a链接等行内元素居中

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

caniuse