chrome 89 css样式 /deep/ 不生效

Question

chrome 89 css样式 /deep/ 不生效
原本应用样式

更新chrome 89 之后样式

/deep/ 没办法选中元素 导致样式失效,请问有什么解决办法

Answer 1

嵌套/deep/会失效，一层deep是可以覆盖样式的

/* 下面的样式不会生效 */
/deep/ .a {
  ...
  /deep/ .b {
    ...
  }
}

/* 只有一层的deep是没问题的 */
/deep/ .a {
  ...
}
/deep/ .b {
  ...
}

解决方案（vue中）：

1. 采用scoped的样式

   • 不用deep
   • deep嵌套最多一层，去掉多层的deep嵌套（注意样式覆盖，外层加个类名）
2. 全局的样式不需要使用/deep/

Answer 2

/deep/ 或者 >>> 都是穿刺 你试试>>>

Answer 3

现在 vue 中使用 deep 好像 style 上必须又 scoped 标签，不然会不生效。

Answer 4

chrome 89版本已经不支持deep了
https://www.chromestatus.com/...