vue component的样式不起作用问题（贴有详细代码不多）

Question

请问为什么下面的css不起作用？//.m-radioCP p{}
aa.vue文件

<template>
<div>
    <radio-cp></radio-cp>
</div>
</template>
<script>
const radioCP={
  template:'<div class="m-radioCP"><i></i><p>222</P></div>'
}
export default{
  components:{
    'radio-cp':radioCP
  }
}
</script>
<style scoped>
.m-radioCP{//css起作用
  color: red;
}
.m-radioCP p{//请问为什么这里的css不起作用
  color: #333;
}
</style>

Answer 1

你把scoped去掉试试，就知道为什么了！

Answer 2

scoped 属性使 css仅对当前组件生效，
而你使用 template渲染出的内容，可以理解为子组件的内容。
所以不会应用当前 css。

Answer 3

没毛病啊，你确定不起作用？

Answer 4

scoped 这个是对当前组件起使用，而你引用的是另一个组件

Answer 5

.m-radioCP{
color: red;
}//css起作用
.m-radioCP p{//请问为什么这里的css不起作用
color: #333;
}

Answer 6

.m-radioCP p{//请问为什么这里的css不起作用
  color: #333;
}

把这段放到公共样式文件里去