![CSS 点击按钮以后修改DIV的高度，代码怎么写？[有代码]](/aiimages/CSS+%E7%82%B9%E5%87%BB%E6%8C%89%E9%92%AE%E4%BB%A5%E5%90%8E%E4%BF%AE%E6%94%B9DIV%E7%9A%84%E9%AB%98%E5%BA%A6%EF%BC%8C%E4%BB%A3%E7%A0%81%E6%80%8E%E4%B9%88%E5%86%99%EF%BC%9F%5B%E6%9C%89%E4%BB%A3%E7%A0%81%5D.png)
我们通过 ::v-deep 操作符就使Types组件内的 li 添加了样式
我们传入一个初始值给 Types 子组件，让其记录选中的 li 标签显示我们自定义的样式。
这只是有两个li的情况，如果里面有很多个li呢？所以我们需要精确选中。
封装成一个函数，返回一个对象，还可以接受参数，方便遍历。
之前在开发中遇到一个问题，vue项目结合 element ui 使用。
但是 element ui 的样式不一定符合我们的需求，这时我们就需要改变它的样式。
比如博主使用到了element ui 的对话框，我想要改变这个对话框标题的颜色，所以我需要在页面中审查元素找到对应的标签。
但是当我找到并且复制，然后试图去改变它的样式时，怎么都没办法改变。
我以为是权重的问题，所以我加 ! important，但是也毫无作用。
当我审查元素发现此样式就没有作用到，就相当于它没有找到这个元素，所以也就不存在改不改变样式的问题了。
这时我们就需要一个选择器能深度的帮助我们找到这个元素，比如 deep
vue组件中，在 style 设置为 scoped 的时候，里面在写样式对子组件是不生效的，如果想让某些样式对所以子组件都生效，可以使用 /deep/ 深度选择器。
这是我起初试图改变的方法（亲测无效）：
这是使用deep后的方法（亲测有效）：
原理就是通过找到父元素深度的找到我们需要改变的子元素，然后改变它的样式即可。
若/deep/后有多层嵌套：
再换种写法 移动/deep/位置：
再换一种 又加个子元素：
综上可以看出.在哪里加的/deep/ ,data属性选择器就会跑到写的上一层去.
若写多个/deep/：
多个/deep/的情况下，只有最外层的/deep/有效，内层的其他/deep/都是无效的，写了也没意义，不建议写。
.
我们使用scoped实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块.但我们难免会用到一些框架如element vant等,我们想要修改其中样式时,如果使用了scoped,则需要深度选择器来进行样式的更改.使用场景:
当我们需要覆盖element-ui中的样式时只能通过深度作用选择器
style为css时的写法如下
有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>>的别名，同样可以正常工作。
style使用css的预处理器(less, sass, scss)的写法如下
第一种/deep/
第二种::v-deep
建议使用第二种方式,/deep/在某些时候会报错,::v-deep更保险并且编译速度更快.
