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的样式里加一个display:bolok;块级元素，如下所示：
浏览后的页面：
由此可以得出结论如下：
text-align:center
- 作用：使元素水平居中。
- 作用在块级元素上。
- 能块级元素内部的行内元素居中。
10.如果遇到一个属性想知道兼容性，在哪查看?
用caniuse来查看
