CSS 深度影响

Vue 使用 UI 组件库 Vuetify 修改样式

从群友那儿学来了一个前端词汇 穿透

原因是我使用 Vuetify 的 文本框 v-text-field

使用了 dense 前/后置 图标就不能 垂直居中 了

先来一个没有 dense 的

<v-text-field
  outlined
  solo
  single-line
  clearable
  prepend-inner-icon="mdi-text"
  hide-details="auto"
  label="请输入"
></v-text-field>

看着感觉有点“胖”。。。

这时候 前置图标 还是居中的

这时候加上 dense

<v-text-field
  dense
  outlined
  solo
  single-line
  clearable
  prepend-inner-icon="mdi-text"
  hide-details="auto"
  label="请输入"
></v-text-field>

再看效果图：

明显图标下移了！看着相当难受啊！

这时候可以看下页面元素的样式，这就是没能居中的原因

然后找到 vuetify.css 发现是这么定义的，这。。太为难我了。。

这时候嘛，作为一个小菜鸟，第一反应，当然是直接修改成 margin-top: 0; 咯

<style scoped>
.v-text-field.v-input--dense .v-input__prepend-inner .v-input__icon > .v-icon,
.v-text-field.v-input--dense .v-input__append-inner .v-input__icon > .v-icon {
  margin-top: 0;
}
<style>

但是，这时候，

刷新了页面，

清理了浏览器缓存，

再看这个元素的样式，发现！

还是 margin-top: 8px;！

这时候不慌，我在 style 标签里加了 scoped 表示仅作用在当前的 vue 组件，

如果删掉 scoped 呢，的确是可以让 前置图标 居中，图就不放了（懒）。

但是，就真的只有这种方式？

当然不，最终我放了个大招，面向群友编程

于是就学到一个新词 穿透

在 Vue 官网 也是有提到过的，新知识点 get。

这时候赶紧改起来

<style scoped>
>>> .v-text-field.v-input--dense .v-input__prepend-inner .v-input__icon > .v-icon,
>>> .v-text-field.v-input--dense .v-input__append-inner .v-input__icon > .v-icon {
  margin-top: 0;
}
<style>

再看效果图：

vue对于各大ui组件样式覆盖的方法

一、深度作用选择器(>>>)

<style scoped>
>>> .van-button {
     font-size: 28px;
}
</style>

二、/deep/预处理器less下使用（与>>>作用相同）

<style scoped lang="less">
.box {
    /deep/ .van-button {
        font-size: 28px;
      }
  }
</style>

然而最近谷歌浏览器对于/deep/貌似不太友好，控制台提示/deep/将要被移除，所以...

// 采用的less的转义和变量插值
<style scoped lang="less">
@deep: ~'>>>';
.box {
    @{deep} .van-button {
        font-size: 28px;
      }
  }
</style>

css: deep深度作用子选择器

>>> 深度作用选择器（注意，只作用于css）

<style scoped>
.wrap >>> .child {
  	color: red;
   }
</style>

deep（可作用于css/less/scss）

父组件代码只需把>>> 替换成deep即可：

<style scoped>
    .wrap /deep/ .child {
      color: red;
    }
</style>