CSS Selector-Assignment

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元素
• 一般的行内元素、、等

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

可以去到caniuse.com网站去查询

---

参考资料

• css选择器中:first-child与:first-of-type的区别