CSS样式失效的情况

前言

记录开发中遇到的一些样式没有生效的问题

---

一 、关于 ::v-deep 没有生效

a {
 ::v-deep.b .c {
    padding: 0;
  }

上面这段代码，在页面里没有生效，我的本意是需要把 c 的 pading 设为 0 的，但到页面里看却确是没有效果

这就百思不得其解了，后面折腾好久，叫来了俺的大佬，大佬操作一波，发现在这里，a 和 b 是同级的，但后面那个 c 是下一级的。我们在最前面用 ::v-deep 就没有生效了。因为 ::v-deep 是前面为外层容器，后面使我们要修改的。

明白之后，我们就很容易入手了，我们把 ::v-deep 移动到后面，那么就不会影响到了。

a {
 .b ::v-deep.c {
    padding: 0;
  }

---

二 、没有加 scoped 导致没有生效

那天在写段样式的时候，检查了很多遍了，但是就是没有生效。后面问了个大哥，才发现原来没有加 scoped 突然就发现自己对这个字段的了解不太熟希，这里也算记录何种情况，以及简单的学习一下对其的应用。

scoped【范围；余地；视野；眼界】

官方解释：当style标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。

• 具体是会在受影响的组件中加上一个唯一的（v-data-something）属性来区别，再使用属性选择器来实现。

所以当时的情况应该是来自父组件的覆盖影响了。