父组件控制子组件样式的问题
老师您好，我一直对父组件控制子组件样式这块有点迷，之前问过一位助教，但我还是感觉他的回答我不是很理解，所以想再问一下。比如说header组件，我想自己控制msg图标离最右边的距离，在父组件中用在子组件中定义的类名进行样式控制，用了样式穿透，最后也没有效果。但是之前我们引入第三方的swiper组件的时候引用它swiper的时候就可以在父组件中定义.swiper-container 的样式，我在父组件中自定义header的样式就不行了，但有时候又可以，比如说div {color: #fff} 它就会把所有的div元素变为白色，求老师解答。附上nav和分类页下的header的代码
这是nav的代码
<template>
<Navbar class="header">
<div slot="middle">请输入搜索内容</div>
<i slot="right" class="iconfont icon-msg"></i>
</Navbar>
</template>
<script type="text/javascript">
import Navbar from '@/base/navbar';
export default {
data() {
return {
}
},
components: {
Navbar
}
}
</script>
<style type="text/css" scoped>
@import 'src/assets/scss/mixins';
.header {
&.navbar {
background: $header-bgc-translucent;
}
}
.icon-font {
font-size: $icon-font-size;
color: #fff;
}
.header >>> .navbar-right {
margin-right: 20px;
} //没有效果
div {
color: #fff;
} //有效果
</style>header的代码
<template>
<Navbar class="header">
<div slot="middle">请输入搜索内容</div>
<i slot="right" class="iconfont icon-msg"></i>
</Navbar>
</template>
<script type="text/javascript">
import Navbar from '@/base/navbar';
export default {
data() {
return {
}
},
components: {
Navbar
}
}
</script>
<style type="text/css" scoped>
@import 'src/assets/scss/mixins';
.header {
&.navbar {
background: $header-bgc-translucent;
}
}
.icon-font {
font-size: $icon-font-size;
color: #fff;
}
.header >>> .navbar-right {
margin-right: 20px;
} //没有效果
div {
color: #fff;
} //有效果
</style>正在回答 回答被采纳积分+1
同学你好， css样式的覆盖可以由样式书写的位置顺序决定
你前面如下图所说的，标签中class类名后面的类名会覆盖前面的类名设置的样式， 这种说法是不严谨的。例：
老师这里给同学举个简单的例子， 如下图标签中的class中的last在first后面。 但是style中书写样式的时候。 first在last后面， 所以fist设置的color属性覆盖了last设置的color属性。最终字体颜色为绿色。示例：
同学可下去结合示例测试一下， 加深自己的理解。 也可以回顾一下以前的视频课程，复习一下CSS层叠和优先级。 在CSS选择的艺术这一阶段的第四章中有详细的讲解哦。http://class.imooc.com/course/752
示例：
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
还有一个问题老师，就像截图中这样我在父组件中给div加了color green的样式，这里为什么能够控制子组件的div的color样式，就像控制台上显示的，我画圈的地方，子组件继承了父组件color：green的样式，我很奇怪，因为给style加了scoped属性后会给每一个组件动态地生成一个专属的data-v属性，这里这两个div专属的data-v属性都不同啊，为什么还可以实现样式的控制？
老师您好，在这里我給header组件在父组件中设置了header类，子组件中本来设置的有navbar这个类，您说的父组件中设置与子组件相同的属性样式， 会被子组件覆盖。这句话我不是很理解，光看控制台的话，header类在navbar类的后面，按照css中的规则的话如果一个元素上设置了两个类的话，如果有样式冲突的话后面的类会覆盖掉前面的类，这里却没有按照这个规则来实现，这是为什么？
同学你好， 可以这样理解
1、因为你在header组件中为div设置字体颜色为白色， 这个div是使用的slot插槽显示navBar中。且在navBar中没有为这里的div设置color属性。 导致字体颜色为白色。
可以尝试在子组件中为div设置color属性
效果图：
所以这就说明如果在组件中定义了scoped属性。 会优先使用自己组件内部设置的样式， 父组件中设置了相同的属性样式， 即使优先级高， 也会被子组件中的样式覆盖。
2、例如你这里在header组件中为图标设置右外边距， 但是没有效果， 因为在父组件的穿透样式写的不对 ， 导致子组件中为图标设置了右外边距， 覆盖了父组件设置的样式。
stylus的样式穿透 使用">>>"
sass和less的样式穿透 使用"/deep/"
因为这里使用的是sass， 所以推荐使用“/deep/” 进行穿透
效果图：
3、 最后： 因为组件化的原因就是为了将整体的功能拆分开， 实现模块化管理，便于项目后期的维护， 所以推荐组件的样式设置在对应的组件中， 方便后期对相应的组件进行样式的调整。
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
<template>
<div class="navbar">
<div class="navbar-left" v-if="$slots.left">
<slot name="left"></slot>
</div>
<div class="navbar-middle" v-if="$slots.middle">
<slot name="middle"></slot>
</div>
<div class="navbar-right" v-if="$slots.right">
<slot name="right"></slot>
</div>
<p v-text="text" v-if="text"></p>
</div>
</template>
<script type="text/javascript">
export default {
data() {
return {
}
},
props: {
text: {
type: String,
default: ""
}
},
}
</script>
<style scoped>
@import 'src/assets/scss/mixins';
.navbar {
height: 50px;
@include flex-between();
background: #fff;
}
.navbar-left {
margin-left: 5px;
}
.navbar-middle {
margin: 0 10px;
flex: 1;
}
.navbar-right {
margin-right: 5px;
}
p {
position: absolute;
top: 0;
bottom: 0;
left: 20%;
right: 20%;
@include flex-center();
// text-align: center;
// line-height: 50px;
//text-align 和 line-height 也能实现和flex-center相同的效果，只不过这是一个基础组件，因此不应该
//将line-height的高度定死
font-size: 15px;
}
</style>这个是navbar的，抱歉，代码贴重复了
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 209 份
- 解答问题 3299 个
本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue，结合多个实战案例，还原真实开发场景，最终实现手机端购物商城网页开发。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星