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

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

<view class='seller-info-container'>
    <view class='seller-avatar-content'>
      <image></image>
    </view>
    <view class='seller-info-item a'>
      <view class='seller-info-text'>姓名</view>
      <view class='seller-info-value'>某某某</view>
    </view>
    <view class='seller-info-item b'>
      <view class='seller-info-text'>电话</view>
      <view class='seller-info-value'>188****9888</view>
    </view>
    <view class='seller-info-item c'>
      <view class='seller-info-text'>小区</view>
      <view class='seller-info-value'>欧拉累小区</view>
    </view>
    <view class='seller-info-item d'>
      <view class='seller-info-text'>详细地址</view>
      <view class='seller-info-value'>广州市天河区天安人寿大楼楼31F</view>
    </view>
  </view>

此时

.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；否则不运用

所以这里，他拿到

<view class='seller-avatar-content'>
   <image></image>
</view>

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

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

或者修改页面结构为

<view class='seller-info-container'>
    <view class='seller-avatar-content'>
      <image></image>
    </view>
    <view class="suiyi">
        <view class='seller-info-item a'>
          <view class='seller-info-text'>姓名</view>
          <view class='seller-info-value'>某某某</view>
        </view>
        <view class='seller-info-item b'>
          <view class='seller-info-text'>电话</view>
          <view class='seller-info-value'>188****9888</view>
        </view>
        <view class='seller-info-item c'>
          <view class='seller-info-text'>小区</view>
          <view class='seller-info-value'>欧拉累小区</view>
        </view>
        <view class='seller-info-item d'>
          <view class='seller-info-text'>详细地址</view>
          <view class='seller-info-value'>广州市天河区天安人寿大楼楼31F</view>
        </view>
    </view>
  </view>

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

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

<div>
    <h1>这是标题</h1>

    <p>这是第一个段落。</p>
    <p>这是第二个段落。</p>
    <p>这是第三个段落。</p>
    <p>这是第四个段落。</p>
</div>

样式表

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

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

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