Vue中修改 elementui组件样式 不生效

1. scoped的作用: ---- 加上scoped的作用是只是对于当前的组件有用(样式)

对于某一个组件，如果style添加上scoped属性,给当前子组件的结构中都添加上一个data-v-xxxx自定属性,会发现vue是通过属性选择器，给需要添加的元素添加上样式

 没加 scoped，html标签都是没有 自定义属性

加了 scoped 后，html标签上会加上一个自定义属性，都是以  data-v-哈希值   ’

h3[ data-v-7ba5bd90 ] ---- 属性选择器

 

2. 子组件的跟标签(拥有父组件当中一样的自定义属性)，如果子组件没有根节点，子组件中的H3就会和父组件中书写的样式相同，也会添加上相应的样式。

 

 

 

<template>
  <div>
    <h3>我是父组件</h3>
    <Chlid/>   <!--如果子组件中 没有 根元素 div 这个标签， H3 也会受到父组件的影响-->
  </div>
</template>
 
 
 
<script>
import Child from '../Child'
el:'App',
components:{
    Child
}
</script>
 
<style scoped>
    h3{
        color:red
    }
</style>
 
 
 
 
 
 
<!--Child.vue-->
<template>
  <div>
    <h3>我是子组件</h3>
  </div>
</template>
 
<style scoped>
</style>

3. 注意:

如果父组件的样式有(scoped) ，而且还想影响到子组件的样式？像这种情况我们可以使用 深度选择器。

深度选择器可以实现样式穿透:

>>>           一般用于原生 CSS

/deep/         一般用于 less

::v-deep      一般用户 scss

<template>
    <div>
        <h3>我是父组件(APP) </h3>
        <h3> scoped添加上给组件的标签新增一个自定义属性</h3>
        <Child1/>
    </div>
</template>
<script>
 
//import Child from './components/child.vue';
import Child1 from './components/child1.vue';
export default {
    name :'App'
    components:(
        Child1
    }
</script>
<style scoped>
/*原生css 深度选择器*/
    >>>h3{
        color:red;
    }
</style>
 
 
 
<!--Child1.vue--->
 
<template>
    <div>
        <h3>我是子组件(Child1) </h3>
        <ul>
            <li>电影</li>
            <li>音乐</li>
            <li>游戏</li>
        </ul>
   </div>
</template>
<script>
 
//import Child from './components/child.vue';
import Child1 from './components/child1.vue';
export default {
    name :'App'
    components:(
        Child1
    }
</script>
<style scoped>
 
</style>