css 选择第一个子元素_css默认选中第一个元素

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

今天的文章
css 选择第一个子元素_css默认选中第一个元素分享到此就结束了，感谢您的阅读。