当我写一段页面结构如下（以微信小程序为例，传统网页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颜色值
