CSS 属性选择器及 Vue scoped 样式穿透

Vue 的 style 使用 scoped 属性时，会给相关 DOM 元素添加类似 `[data-v-26725ac2]` 的属性，导致无法通过 CSS 选择器直接选中某些由 JavaScript 生成的 DOM 元素。本文介绍如何使用属性选择器 (`[data-v-26725ac2]`) 和 `v-deep` (已弃用，建议使用 `>>>` 或深度选择器) 解决这个问题，并详细解释 CSS 属性选择器的用法。

问题

vue 的 style 加入 scoped 属性的时候，会给相关 dom 加上类似这样的东西 [data-v-26725ac2]，导致你可能没选中某些用 js 生成的 dom，后来我用 v-deep 这种方式解决了，这是一个比较巧妙的解决方式。

.dropdown-menu[data-v-26725ac2] {
  margin-top: 5px;
  width: 117px;
}

我当时在群里问 [data-v-26725ac2] 是什么，这个叫 Attr，也叫属性选择器，感谢群友蕾姆和司机的提示。

解决

.dropdown-menu {
  margin-top: 5px;
  width: 117px;
  ::v-deep {
    .popper__arrow {
      display: none;
    }
  }
}