探析CSS Selector

class and id.png

1.CSS选择器常见的有几种？选择器的优先级怎样？
详情请点击Peter的web前端技术博客

2.class和Id的使用场景？
id作为匹配元素的唯一标识，经常被用来进行页面的布局和设计包含块;
class作为匹配一类元素的标识，经常来进行页面的区块设计，具体演示效果如下;
例如：

the difference of class and id.png

3.使用CSS选择器时为什么要划定适当的命名空间？
CSS命名规则（引用犯迷糊的小羊）

4.以下选择器分别是什么意思?

what these mean.png

＃header匹配所有id="header"的元素

.header匹配所有class="header"的元素

匹配所有父元素的class="header"，后代元素的class="logo"的元素

匹配同时具备class="header"和class="mobile"的所有元素

匹配同时所有父元素的class="header",后代元素为P的元素，或是所有class="header"的后代元素为h3的元素

匹配其父元素是header id选择器,子元素是nav类选择器的元素下的li标签

匹配所有id="header",后代元素为a标签的鼠标悬浮动作


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元素	'

6.:first-child和:first-of-type的作用和区别?
:first-child匹配的是父元素下的第一个子元素，具体演示效果如下：

first-child.png

而:first-of-type匹配的是父元素下相同类型子元素的第一个元素,具体演示效果如下：

first-of-type.png

由此可以得知，first-child和first-of-type的区别？
1.first-child匹配父元素的第一个子元素，而不是同类子元素下的第一个；
2.first-of-type匹配父元素下同类子元素的第一个。

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

运行如下代码.png

首先item1:first-child匹配的父元素下的第一个子元素，具体到代码就是
ct父元素下的第一个子元素，即第一个item1,内容为aa，因此aa有了红色

item1:first-of-type匹配父元素下的同类子元素的第一个，具体到该代码就是
class="ct"的父元素下的同类子元素的第一个，分别为p(内容为aa)和第二个h3（内容为bb）有样式,因此它们就有蓝色的background-color。

8.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中

text-align:center的作用是让inline元素水平居中

inline元素以及block内置的inline元素

一般的行内元素、、等

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

参考资料：
first-child和first-of-type深入理解
饥人谷犯迷糊的小羊
感谢看众：

gaki-smile.png

本教程版权归饥人谷peter和饥人谷所有，转载须说明来源