---

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在元素之后插入生成的内容

选择器的优先级是怎样的?

0_1463193916055_upload-503b935c-88bf-4e46-98b9-d302dbe9124f

若CSS规则由多个选择器组成，每个选择器本身有优先级，越具体优先级越高，如果两个选 择器规权值一样，则后面的样式会覆盖前面的

class 和 id 的使用场景?

一般id选择器用于大的布局，class则用于大部分里面的具体内容

0_1463194261444_upload-f3c14842-cffb-4236-be45-2b4fb0186f22

使用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限制了必须是第一个子元素

运行如下代码，解析下输出样式的原因。

0_1463197588825_upload-9d4e8416-9724-4b01-a50b-3fdeadbe4785

运行结果如下：

0_1463197548708_upload-17f77a09-746a-47a7-a8bf-ad32041ff31b

• 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>等元素水平居中

如果遇到一个属性想知道兼容性，在哪查看

canius

0_1463204547676_upload-873e26d3-53e6-47fe-a80b-e1b027e38f84