CSS3的first

CSS 中的 :first-child Selector 能够挑选到特殊元素的第1组物品(同1个 parent)
HTML

CSS

first-child和:first-of-child的差别
倘若大家有这样的1段HTML编码：

CSS挑选器：
大家要搜索在其中的元素，假如应用下面的界定方式——
p:first-child  配对到的是p元素,由于p元素是div的第1个子元素；
h1:first-child  配对不到任何元素，由于在这里h1是div的第2个子元素，而并不是第1个；
span:first-child  配对不到任何元素，由于在这里两个span元素都并不是div的第1个子元素；
:first-child  配对到的是p元素,由于在这里div的第1个子元素便是p。
上面运用的款式，有两个是配对不到的，可是别惊慌，CSS中还界定了:first-of-child伪类，请看他的用法和解读：
p:first-of-type  配对到的是p元素,由于p是div的全部为p的子元素中的第1个，客观事实上这里也仅有1个为p的子元素；
h1:first-of-type  配对到的是h1元素，由于h1是div的全部为h1的子元素中的第1个，客观事实上这里也仅有1个为h1的子元素；
span:first-of-type  配对到的是第3个子元素span。这里div有两个为span的子元素，配对到的是第1个。
:first-of-type  配对到的是p元素
总结：
:first-child 配对的是某父元素的第1个子元素，能够说是构造上的第1个子元素。
:first-of-type 配对的是该种类的第1个，种类是指甚么呢，便是冒号前面配对到的物品，例如 p:first-of-type，便是指全部p元素中的第1个。这里已不限定是第1个子元素了，要是是该种类元素的第1个就可以了，自然这些元素的范畴全是 属于同1级的，也便是同辈的。
一样种类的挑选器 :last-child  和 :last-of-type、:nth-child(n)  和  :nth-of-type(n) 还可以这样去了解。

IE的适配型难题
先看以下1段编码，HTML一部分：

CSS一部分：

假如必须将第1个li的margin-left设为0px，则能够根据下面这个方式完成：

但是，IE6不适用:child-first方式，因而大家必须应用表述式几乎完成IE6也适用:child-first，编码以下：

自然，大家还可以给第1个li加上1个class来再次界定margin-left，假如说是静态数据网页页面这样做还能够，假如说程序流程必须循环系统輸出li的话应用child-first会好些，最少可使程序流程少做1条分辨。