:first-child 的坑（first-child的伪类选择器不起作用）

比如下面的代码，刚开始不知为什么 ：first-child的伪类选择器不起作用，而last-child却有作用

<div class="procedureWrap">    
	<div class="procedure_info">
		尊敬的用户您好，您的入职流程需要按照如下步骤进行操作，了解流程后即可前往填写相关信息
	</div>    
	<div class="procedure">
		填写入职资料和身份信息<br />
		(包括身份证账号和照片等)
	</div>    
	<div class="arrow">
	</div>    
	<div class="procedure">
		查看相关规章制度并确认
	</div>    
	<div class="arrow">
	</div>    
	<div class="procedure">
		签劳动合同阅读并手写签字等等
	</div>    
	<div class="arrow">
	</div>    
	<div class="procedure">
		社保信息录入和工资卡信息填写
	</div>
</div>
.procedure:first-of-child{margin-bottom: 4px;height: 48px;line-height: 18px;}	

后来查阅有关资料发现：

使用:first-child伪类时一定要保证前面没有兄弟节点，把

<div class="procedure_info">尊敬的用户您好，您的入职流程需要按照如下步骤进行操作，了解流程后即可前往填写相关信息</div>

去掉就可以；或者使用div包住

<div class="procedure_info">尊敬的用户您好，您的入职流程需要按照如下步骤进行操作，了解流程后即可前往填写相关信息</div>

下面的内容，然后css：

procedure:first-child