1.CSS选择器常见的有几种？选择器的优先级怎样？
<a href="//www.greatytc.com/p/55a550d90da6">详情请点击Peter的web前端技术博客</a>
</br>
2.class和Id的使用场景？
id作为匹配元素的唯一标识，经常被用来进行页面的布局和设计包含块;
class作为匹配一类元素的标识，经常来进行页面的区块设计，具体演示效果如下;
例如：
3.使用CSS选择器时为什么要划定适当的命名空间？
<a href="//www.greatytc.com/p/70064a837e00">CSS命名规则</a>（引用犯迷糊的小羊）</br>
4.以下选择器分别是什么意思?
<li>＃header匹配所有id="header"的元素
<li>.header匹配所有class="header"的元素
<li>匹配所有父元素的class="header"，后代元素的class="logo"的元素
<li>匹配同时具备class="header"和class="mobile"的所有元素
<li>匹配同时所有父元素的class="header",后代元素为P的元素，或是所有class="header"的后代元素为h3的元素
<li>匹配其父元素是header id选择器,子元素是nav类选择器的元素下的li标签
<li>匹配所有id="header",后代元素为a标签的鼠标悬浮动作
</br>
5.列出你知道的伪类选择器
| 选择器 | 含义 | 例子 |
|---|---|---|
| E:first-child | 匹配父元素E下的第一个子元素 | div:first-child{text-align:center;} |
| E:link | 匹配所有未被点击的链接 | a:hover{color:red;} |
| E:visited | 匹配所有已被点击的链接 | a:visit{color:blue;} |
| E:active | 匹配鼠标已经按下、还没有释放的E元素 | a:active{color:pink;} |
| E:hover | 匹配鼠标悬停其上的E元素 | a:hover{color:green;} |
| E:focus | 匹配获得当前焦点的E元素 | a:focus{color:black;} |
| E:lang(c) | 匹配lang属性等于c的E元素 | ' |
</br>
6.:first-child和:first-of-type的作用和区别?
:first-child匹配的是父元素下的第一个子元素，具体演示效果如下：
而:first-of-type匹配的是父元素下相同类型子元素的第一个元素,具体演示效果如下：
由此可以得知，first-child和first-of-type的区别？
1.first-child匹配父元素的第一个子元素，而不是同类子元素下的第一个；
2.first-of-type匹配父元素下同类子元素的第一个。
</br>
7.运行如下代码，解析下输出样式的原因。
首先
item1:first-child匹配的父元素下的第一个子元素，具体到代码就是
ct父元素下的第一个子元素，即第一个item1,内容为aa，因此aa有了红色
item1:first-of-type匹配父元素下的同类子元素的第一个，具体到该代码就是
class="ct"的父元素下的同类子元素的第一个，分别为p(内容为aa)和第二个h3（内容为bb）有样式,因此它们就有蓝色的background-color。
</br>
8.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
<li>text-align:center的作用是让inline元素水平居中
<li>inline元素以及block内置的inline元素
<li>一般的行内元素<span>、<img>、<a>等
</br>
9.如果遇到一个属性想知道兼容性，在哪查看?
<a href="http://caniuse.com/">caniuse</a>
参考资料：
<a href="http://www.cnblogs.com/2050/p/3569509.html">first-child和first-of-type深入理解</a>
<a href="//www.greatytc.com/p/8dfd839cc2e4">饥人谷犯迷糊的小羊</a>
感谢看众：
本教程版权归饥人谷peter和饥人谷所有，转载须说明来源
