Hbuilder+uniapp+uviewui SCSS 类选择器失效,仅有元素选择器起效?

开发环境

  • Hbuilder
  • uniapp
  • uviewui
  • 微信开发者工具

问题

在开发过程中使用了uviewui 的 u-form-item 组件

<u-form-item class="form-item" :border-bottom="false" label-position="top" label-width="200" label="姓名:" prop="name">
    <u-input v-model="baseInfo.name" class="input-width" :disabled="true" :clearable="false" maxlength="10" placeholder="请输入姓名"/>
</u-form-item>

其组件编译出来的代码如下图所示
image.png
我在组件中编写 SCSS 代码如下

<style lang="scss" scoped>
    ::v-deep.form-item>view {
            // 有效
        padding-top: 10rpx;
        padding-bottom: 10rpx;
    }
    ::v-deep.form-item>view .u-form-item--left{
            // 无效不会作用到元素上
        margin-bottom: 30rpx;;
    }
    ::v-deep.form-item>view>view>view{
            // 有效
        margin-bottom: 30rpx;;
    }
</style>

编译出来的WXSS代码如下

.data-v-93decd04.form-item > view {
  padding-top: 10rpx;
  padding-bottom: 10rpx;
}
.data-v-93decd04.form-item > view .u-form-item--left {
//无效
  margin-bottom: 30rpx;
}
.data-v-93decd04.form-item > view > view > view {
  // 生效
  margin-bottom: 30rpx;
}

所以有一个疑问 为何类选择器失效 仅有元素选择器生效?但是uview的wxss中也是用的类选择器。

阅读 2k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏