vue组件样式冲突问题，需要使用deep（笔记）

子组件count

<template>
	<div>
		<h1>count组件,绿色 </h1>
		<div id="div1">
			<h2>颜色3</h2>
		</div>
		<div id="div2">
			<h2>颜色4</h2>
		</div>
	</div>
</template>

<style scoped="scoped">
	h1 {
		background-color: green;
	}
</style>

子组件word

<template>
	<div>
		<h1>word组件,粉色</h1>
		<h2>颜色2</h2>
	</div>
</template>

<style scoped="scoped">
	h1 {
		background-color: pink;
	}
</style>

父组件app

<template>
	<div id="app">
		<h1>app组件，黄色</h1>
		<h2>颜色1</h2>
		<MyWord id="w1" />
		<MyCount id="c1" />
	</div>
</template>

<style scoped="scoped">
	h1 {
		background-color: yellow;
	}
</style>

效果图

目标：

1、把子组件word的颜色2改为红色
2、把子组件count的颜色4改为橙色

——————————————————————————
app样式修改

<style scoped="scoped">
	h1 {
		background-color: yellow;
	}


	#w1 /deep/ h2 {
		background-color: red;
	}
	
	#c1 /deep/ #div2 h2 {
		background-color: orange;
	}
</style>

效果