【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:

 方案一：不加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

相关资料：

• Vue Loader
• vue样式穿透 ::v-deep的具体使用
• vue：style标签中的scoped属性（作用域）和lang属性的介绍

搜索

复制