2016/05/15
问答
CSS选择器常见的有几种?
1.id选择器
选择设置id的元素，如 #header{}
2.类选择器
选择有相同class的元素，如 .header{}
3.属性选择器
以某个属性作为选择依据，如 input[type="text"]{}
4.分组选择器
可以对选择器进行分组，被分组的选择器对应的元素就有相同的样式。用逗号将需要分组的选择器分开。如 h1,.p1{}
5.派生选择器
选择某个元素下的子元素，通常用于作用域隔离，如 .mod-box p{}
6.伪类选择器。
常用的有:hover鼠标放置上的样式（ie6,7,8不支持a以外的标签用:hover）
:first-of-type从一组中选择第一个元素
:last-of-type从一组中选择最后一个元素
:first-child匹配元素的第一个子元素
:last-child匹配元素的最后一个子元素
7.伪元素选择器。
常见的有,::before在元素之前插入生成的内容
::after在元素之后插入生成的内容
选择器的优先级是怎样的?
若CSS规则由多个选择器组成，每个选择器本身有优先级，越具体优先级越高，如果两个选 择器规权值一样，则后面的样式会覆盖前面的
class 和 id 的使用场景?
一般id选择器用于大的布局，class则用于大部分里面的具体内容
使用CSS选择器时为什么要划定适当的命名空间？
这是代码语义化的一种体现，是为了更好地匹配我们特定需要匹配的元素，只对匹配的元素生效，保证代码样式在合理的控制内不出现不必要的错误
以下选择器分别是什么意思?
header{}: ID选择器，匹配ID为header的元素
.header{}:类选择器，匹配class为header的元素
.header .logo{ }：匹配class为header后代里面所有class为logo的元素
.header.mobile{ }：匹配同时有class为header和class为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标签加上鼠标移入的效果
列出你知道的伪类选择器
a:link{}
a:visite{}
a:hover{}
a:active{}
:first-child选择某个元素的第一个子元素
:last-child选择某个元素的最后一个子元素
:nth-child():选择某个元素的一个元素或多个特定的子元素
:nth-last-child():选择某个元素的一个元素或多个特定的子元素,从这个元素的最后一个子元素开始算
:first-of-type选择一个上级元素下的第一个同类子元素
:last-of-type选择一个上级元素下的最后一个同类子元素
:nth-of-type()选择指定元素
:nth-last-of-type()选择指定元素,从这个元素的最后一个开始算
:first-child和:first-of-type的作用和区别
:first-child选择某个元素的第一个子元素
:first-of-type选择一个上级元素下的第一个同类子元素
区别：:first-of-type没有限制，只要是同一个类别里面的第一个就行，first-child限制了必须是第一个子元素
运行如下代码，解析下输出样式的原因。
运行结果如下：
- 111字体蓝色：当前元素.item1是其父元素body的第一个孩子
- 222字体蓝色：当前元素.item1是其父元素.ct的第一个孩子
- 555字体蓝色：当前元素.item1是其父元素item2的第一个孩子
- 111背景红色：当前元素.item1是其父元素body下所属类型为div的孩子的第一个
- 222背景红色：当前元素.item1是其父元素.ct下所属类型为p的孩子的第一个
- 333背景红色：当前元素.item1是其父元素.ct下所属类型为div的孩子的第一个
- 555背景红色：当前元素.item1是其父元素.item2下所属类型为div的孩子的第一个
text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
text-align:center的作用是让一个块元素中的行内元素水平居中，比如能让<span>,<img>等元素水平居中
如果遇到一个属性想知道兼容性，在哪查看
