本教程版权归凯旋和饥人谷所有，转载须说明来源
一 、CSS选择器常见的有几种?
id选择器：#footer {}
类选择器：.content {}
标签选择器:body,h2,p,table,th,td {}
后代选择器（派生选择器）：后代选择器可以选择某个元素的后代元素，div p{}
子元素选择器：h1 > em {}
属性(值)选择器：根据元素的属性及属性值选择元素，a[href="http://jirengu.com"]
伪类选择器：a:hover {}、div:last-child {}
参考－选择器
30种选择符
MDN
二 、选择器的优先级是怎样的?
在属性后面使用 !important,会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素标签上的内联样式。
id选择器
类选择器
伪类选择器
属性选择器
标签选择器
通配符选择器
浏览器自定义
总的来说，定位的越精准，优先级就越高。优先级高的样式会覆盖优先级低的
三 、class 和 id 的使用场景?
class是指定标签的类名。在一个页面之中可以反复的使用。
id是指定标签的标识。在页面之中具有唯一性。属性优于class。
class多用于各区域细小模块，具有很大重复性而id则用于主要区域进行页面的宏观布局；结构语义化更清晰。
四 、使用CSS选择器时为什么要划定适当的命名空间？
1.保证代码的可读性和易维护便于代码管理和多人协作；
2.符合语义化；
五 、以下选择器分别是什么意思?
#header{}
/*id选择器，匹配id=“header”的元素*
/
.header{}
/*class选择器，匹配class=“header”的元素*
/
.header .logo{}
/*后代选择器，匹配class=“header”元素下所有class=“logo”的元素*
/
.header.mobile{}
/*类选择器，匹配class=“header”元素且同时class=“mobile”的元素*
/
.header p, .header h3{}
/*多元素选择器，匹配class=“header”元素下的P元素 和 h3元素*
/
#header .nav>li{}
/*后代选择器，匹配id=“header”下class=“nav”的直接子元素li*
/
#header a:hover{}
/*后代选择器，匹配鼠标悬停在id=“header”元素下的a元素*
/
六 、列出你知道的伪类选择器？
E:link：匹配所有未被点击的链接
E:visited：匹配所有已被点击的链接
E:active：匹配鼠标已经其上按下、还没有释放的E元素
E:hover：匹配鼠标悬停其上的E元素
E:focus：匹配获得当前焦点的E元素
E:lang(c)：匹配lang属性等于c的E元素
E:enabled：匹配表单中可用的元素
E:disabled：匹配表单中禁用的元素
E:checked：匹配表单中被选中的radio或checkbox元素
E::selection：匹配用户当前选中的元素
E:root：匹配文档的根元素，对于HTML文档，就是HTML元素
E:first-child：匹配元素E的第一个子元素
E:last-child：匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:nth-child(n)：匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n)：匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n) ：与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n)：与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:first-of-type：匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type：匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child：匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type：匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
七 、:first-child和:first-of-type的作用和区别？
：first-child：匹配的是某父元素的第一个子元素，是html结构上的第一个子元素,嵌套关系下的第一个子元素，也是会被匹配。
：first-of-type：配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。
consult
八 、运行如下代码，解析下输出样式的原因。
<style>
.item1:first-child{ color: red;}
/*该元素是其父元素第一个子元素，若该子元素是class为item1的div，则选中，故选中.item1,ct-item2-item1两项*/
.item1:first-of-type{ background: blue;}
/*该元素是其父元素第一个同类型且叫item1的孩子，故选中.item1,ct-item2-item1两项*/
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
.item1:first-child 使是指后代中
第一个子元素，并且满足同时满座class是.item 第一个子元素p
，且满足同时满座class是.item所以只是p应用了红色。
.item1:first-of-type
该元素是其父元素第一个同类型且叫item1的孩子，故选中.item1,ct-item2-item1两项
九 、text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
作用在块级元素上，能让其内部行内元素及文本水平居中对齐
十 如果遇到一个属性想知道兼容性，在哪查看?
