1.CSS选择器常见的有几种?
详情请见teren的技术博客:CSS选择器与优先级浅析
2.选择器的优先级是怎样的?
详情请见teren的技术博客:CSS选择器与优先级浅析
3.class 和 id 的使用场景?
id作为匹配元素的唯一标识，常用来进行页面的宏观布局和设计包含块；
class作为匹配一类元素的标识，常用来进行页面的区块设计，具体演示效果如下：
更多介绍，请见teren的技术博客:来找茬——class和id两位孪生兄弟
4.使用CSS选择器时为什么要划定适当的命名空间？
详情请见技术博客：精简的CSS命名规则
5.以下选择器分别是什么意思?
- ＃header匹配所有id="header"的元素
- .header匹配所有class="header"的元素
- 匹配所有父元素的class="header"，后代元素的class="logo"的元素
- 匹配同时具备class="header"和class="mobile"的所有元素
- 匹配所有class="header"的后代元素为p的元素，或是所有class="header"的后代元素为h3的元素
- 匹配所有id="header"，后代元素的class="nav"且其所有子元素为li的元素
- 匹配所有id="header",后代元素为a标签的鼠标悬浮动作
6.列出你知道的伪类选择器
| 选择器 | 含义 | 实例 |
|---|---|---|
E:first-child |
匹配父元素E下的第一个子元素 | div:first-child{text-align:center;} |
| E:link | 匹配所有未被点击的链接 | |
| E:visited | 匹配所有已被点击的链接 | |
| E:active | 匹配鼠标已经按下、还没有释放的E元素 | |
| E:hover | 匹配鼠标悬停其上的E元素 | |
| E:focus | 匹配获得当前焦点的E元素 | |
| E:lang(c) | 匹配lang属性等于c的E元素 |
7.:first-child和:first-of-type的作用和区别
:first-child匹配的是父元素下的第一个子元素，而:first-of-type匹配的是父元素下相同类型子元素的第一个元素，具体演示效果如下：
p:first-child匹配到的是div下的第一个子元素p，第二个子元素p不会显示样式；
h1和span都不是div下的第一个子元素，也不会显示样式；
span：first-of-type匹配的是div下的相同类型的子元素span的第一个元素，而第二个元素span不会显示样式
由此我们可知，first-
child和first-of-type的区别：
- first-child匹配父元素的第一个子元素，而不是同类子元素下的第一个；
- first-of-type匹配父元素下同类子元素的第一个。
8.运行如下代码，解析下输出样式的原因。
以上代码具体演示效果如下：
- 第一个样式.item1:first-of-type匹配父元素下的同类子元素的第一个，具体到该代码就是
- body父元素下的同类子元素，即第一行的item1,内容为111有样式
class="ct"的父元素下的同类子元素的第一个，分别为p(内容为222)和第二个item1（内容为333）有样式
class="item2"的父元素下的同类子元素的第一个，即第四个item1(内容为555)有样式
综上看来，.item1:first-of-type匹配父元素为body、ct、item2下的同类子元素的第一个，即内容分别为111、222、333和555
第二个样式.item1:first-child匹配的父元素下的第一个子元素，具体到代码就是
- body父元素下的第一个子元素，即第一个item1，内容为111；
- ct父元素下的第一个子元素，即第二个item1,内容为222；
- item2父元素下的第一个子元素，即第五个item1，内容为555
9.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
- text-align:center的作用是让inline元素水平居中
- inline元素以及block内置的inline元素
- 一般的行内元素
<span>、<img>、<a>等
10.如果遇到一个属性想知道兼容性，在哪查看?
可以去到caniuse.com网站去查询
参考资料
