从你走进我心里的那一刻，我就没打算再把你放出去。下面的文章分两节，一节一节的消化吧。
铺垫
在使用scss语法进行嵌套的时候要先看看这段scss代码
.text { color: blue; :hover { color: red } }
如此先了解:hover这个伪类的使用：
.text:hover{ color:red }
应该要知道这么写才是让这个伪元素生效在text上的写法【不用嵌套的形式】。可见下图（鼠标悬浮在文本上）：
可以看见文本是变了颜色的。
你可能会想，既然这样可以的话，为什么我们又要用scss的嵌套呢？
其实原因很简单，看下面的代码：
<div id="app"> <p class="text"> 你最好啦～ <a>嘿嘿</a> </p> </div>
看p标签下又嵌套了个a标签，这时候我们又要给a标签写蓝色文字样式：
.text:hover{ color:red } .text{ a{ color: blue; } }
就下面这样了：
虽然有效果，单玩意里面很多层呢？这么写肯定是不好的，所以我们就有了嵌套写法：
.text{ :hover{ color:red; } a{ color: blue; } }
哎哟～鼠标悬浮上去：
没有红色？问题出在哪呢？
抢答：我知道，问题是因为:hover应该是直接作用在text上，这种嵌套实际是作用在某个子元素上，如果正确浏览器应该解析成.text:hover。
嗯嗯，是这样，我们来看看刘浏览器的解析：【审查元素-选中text-勾选hover，我们发现并没有相关css】
所以这个时候，怎么办呢？来，上才艺：&
.text{ &:hover{ color:red; } a{ color: blue; } }
再一看
有了，
都有了。
出来了，我们分析一下：
.text:hover是作用在了class为text的元素上，在.text下&:hover{color:red;}，是不是可以理解为，&是让该样式作用在.text上。
那么怎么切换class呢？
<p class="good active"> 我是一个像漂亮妹妹的标签 </p>
.good{ color:red; &.active{ color: blue; } }
这样会显示什么颜色呢？红色还是蓝色呢？
接下来就是见证奇迹：
没错，他是蓝色。看见了没，他们在是作用的同一个标签，单用了&的权重大于没用的，为什么呢，因为&.active会被浏览器解析为
.good.active { color: blue; }
相当于去啊种多了一个class
优先级问题，这就是为什么可以动态设置class的原因了，在vue中完全可以通过动态绑定class来实现切换。这个可以实现那个会员套餐的升级写法：看实操。
<template> <div id="app"> <div class="item" @click="activeIndex = index" :class="activeIndex === index ?'active':''" v-for="(item,index) in vipList" :key="index"> <p>{{item.title}}，{{item.price}}</p> </div> </div> </template> <script> //原理 //通过&的权重高来覆盖样式 //click切换套餐，选中的套餐添加active的class //有了active这个class，css中的&.class就会生效 export default { name: 'app', data () { return { vipList:[{title:'套餐1',price:20},{title:'套餐2',price:30},{title:'套餐2',price:40}],//套餐列表 activeIndex:0,//已选中套餐 } }, } </script> <style lang="scss"> .item{ cursor: pointer; border: 1px solid #999; p{ color: blue; } &.active{ border: 1px solid red; p{ color: red; } } } </style>
原理在代码块里了。
最后，你是最棒的哦，相信自己，月薪破万不是梦。
