【css】vue项目深度作用选择器（scoped）

scoped 修饰的style只给当前组件内的元素使用
本质：
1.给当前组件中的所有元素，添加一个随机的属性
2.给当前组件中的所有元素的样式添加一个对应的随机属性选择器

描述：

场景：按照设计图，修改select选择器的样式

设计图效果

html

<el-select class="el-select-box"
    v-model="sortStatus"
    @change="handleStatus">
        <el-option v-for="item in items" 
            :key="item.index" 
            :label="item.text" 
            :value="item.index"></el-option>
</el-select>

css:

<style lang="scss" >
//select 下拉css
.el-select-dropdown{
    top:557px;
    .el-select-dropdown__item.selected:after{
      position: absolute;
      right: 20px;
      font-family: element-icons;
      content: "";
      font-size: 12px;
      font-weight: 700;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    .el-select-dropdown__item{
      width: 108px;
      height: 30px;
      color:#666;
    }
}

.ranking-top {
    width: 100%;
    height: 50px;
    padding: 0 20px;
    border-bottom: 1px solid #f4f3f8;
    .el-select{
        width:98px!important;
        .el-input__inner{
            font-size:14px;
            font-weight: bold;
            line-height:28px;
            border:none;

        }
        .el-input__icon{
            line-height: 28px;
        }
    }
}
</style>

方案一：不加scoped

效果图（正是想要的效果）

ps: 由于select的下拉框是直接在body中的，为了修改下拉框的css,需要加一个scoped

方案二：加上scoped,select 的css失效啦

效果图（非想要效果）

解决方案：.ranking-top 前面加上一个::v-deep

最终方案：

1、使用深度作用选择器::v-deep

2、使用popper-append-to-body属性，修改弹出层的插入位置注意，该属性值为boolean类型

html

<el-select class="el-select-box"
    :popper-append-to-body="false"
    v-model="sortStatus"
    @change="handleStatus">
        <el-option v-for="item in items" 
            :key="item.index" 
            :label="item.text" 
            :value="item.index"></el-option>
</el-select>

css

<style lang="scss" scoped>
::v-deep .ranking-top {
    width: 100%;
    height: 50px;
    padding: 0 20px;
    border-bottom: 1px solid #f4f3f8;
    .el-select{
        width:98px!important;
        .el-input__inner{
            font-size:14px;
            font-weight: bold;
            line-height:28px;
            border:none;

        }
        .el-input__icon{
            line-height: 28px;
        }
        //select 下拉css
        .el-select-dropdown{
            top:557px;
            .el-select-dropdown__item.selected:after{
                position: absolute;
                right: 20px;
                font-family: element-icons;
                content: "";
                font-size: 12px;
                font-weight: 700;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
            .el-select-dropdown__item{
                width: 108px;
                height: 30px;
                color:#666;
            }
        }

    }
}
</style>

【css】vue项目深度作用选择器（scoped）

描述：

方案一：不加scoped

方案二：加上scoped,select 的css失效啦

最终方案：

相关资料：

导航

公告