开发环境
- 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>
其组件编译出来的代码如下图所示
我在组件中编写 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中也是用的类选择器。