css3 :first-child、:nth-child(1)选择第一个元素不起作用的解决方案

当我写一段页面结构如下（以微信小程序为例，传统网页div结构是一样的道理）

    
      
    
    
      姓名
      某某某
    
    
      电话
      188****9888
    
    
      小区
      欧拉累小区
    
    
      详细地址
      广州市天河区天安人寿大楼楼31F
    
  

此时

.seller-info-item{
  margin-top: 50rpx;
}
.seller-info-item:nth-child(1){
  margin-top: 30rpx;
}

/*或者*/
.seller-info-item:first-child{
  margin-top: 30rpx;
}

都不能设置class为seller-info-item a 的margin-top为30rpx；
查询资料得知first-child、nth-child(1)这两个伪类元素作用周期执行以下操作:

选择器匹配属于其父元素 seller-info-container 的第 N 个子元素，不论元素的类型。
然后判断第N个子元素是不是伪类调用者，如果是，则运用margin-top为30；否则不运用

所以这里，他拿到

这个元素，发现不匹配，然后不运用样式表；如果想要运用样式成功，则使用

.seller-info-item:nth-child(2){
  margin-top: 30rpx;
}

或者修改页面结构为

    
      
    
    
        
          姓名
          某某某
        
        
          电话
          188****9888
        
        
          小区
          欧拉累小区
        
        
          详细地址
          广州市天河区天安人寿大楼楼31F
        
    
  

即可让class为seller-info-item a 的margin-top为30rpx；

这里补充一下
:first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素。等同于 :nth-of-type(1)。例子

    
这是标题

    
这是第一个段落。
    
这是第二个段落。
    
这是第三个段落。
    
这是第四个段落。

样式表

p:first-of-type{
    background:#ff0000;
}

/*或者*/
p:nth-of-type(1){
background:#ff0000;
}

都可以设置
这是第一个段落。背景为ff0000颜色值