问题复现

<view class="intro">欢迎使用代码片段，可在控制台查看代码片段的说明和文档<view class="flex-box"><!-- avatar自定义组件内容：<view class="avatar"></view> ---><avatar></avatar><avatar></avatar><avatar></avatar></view><view class="flex-box"><view class="avatar"></view><view class="avatar"></view><view class="avatar"></view></view>
</view>

.flex-box{display: flex;justify-content: center;
}
/* 自定义组件的样式隔离设置为apply-shared，使其样式能够受到外部组件影响 */
.avatar{width: 20%;height: 100px;margin: 5px;background-color: red;
}
.avatar:nth-child(2n){width: 20%;height: 100px;margin: 5px;background-color: green;
}

原因分析

在调试器中查看渲染树可以看到，小程序在渲染自定义组件avatar的时候，会额外添加结点，使得其内部的样式会出现一些奇怪的问题，受影响较大的是flex、grid布局等，用来确定布局内容间隔而用的css选择器：:nth-child(n) 等皆会受到影响。

解决方法

微信小程序官方在2.11.2版本开始支持 虚拟化结点，可以使组件本身的结点（也就是我们认为多出来的结点）消失，直接展示内部内容。

只需要在子组件js中加入以下配置：

渲染树就会如我们所想的那样展示了，不再会有多的结点。页面内容也如我们所愿。