css样式不生效的排查思路（vue框架下）

那么我们在调整css样式发现效果不生效时，我们应该怎么去排查呢

用调整工具先调css

首先，css不生效，我们应该先查按F12 去查看一下源代码找到我们要操作的组件

然后在 组件当中新建样式规则（或者在选定的class类当中直接修改），在这个样式规则下，相当于在样式的最底下又添加了一个样式选择器，你可以尝试编辑你想要的属性。

这时，我们编辑的效果就可以在 前端很直观的展现出来了

比如我们添加了 padding-bottom: 6px; 是能正常在页面当中显示那么就证明我们的思路没错，加上这个样式就可以实现了。

这时我们就实现了排查的一半工作量

此时，我们只需要在 对应的class 当中添加进去我们刚刚修改的代码就行

但是好像没那么简单

情况一、我用的是elementUI 组件里面的样式我设置不了

比如 我用了 el-card 调试时 修改的是 组件里的 el-card__body ，那么我们就没法直接改el-card_body 怎么办

方法肯定是有的： 我们通过 /deep/ 深度选择器，把 el-card 的scoped限制打穿

例如 :

 .card /deep/ .el-card__body{ ......  }

情况二、我没有用到组件，但是还是没效果

可能的情况： 其他地方也修改到这个选择器了，比如，我们修改 .card_contain 的地方在<style> 的上半部分，但是 .card_contain在 <style>的下半部分 也有定义，导致了覆盖

<style>
    // 上半部分定义
    .card_contain{
        padding:3px;	// 如果这里修改padding的话，会导致下面的样式覆盖
    }
    .......
    // 下半部分又多写了
    .card_contain{
        padding:10px;
    }
    
</style>

那我们怎么办，如果工程非常复杂的时候，我们不太好查找，我们一半有两种方法

1. 我们可以把样式移动到最底下，防止覆盖

2. 使用important! 最好谨慎使用，这里会把这个样式的优先级放到最高，不会被覆盖，但是会容易影响到整体项目，最好谨慎使用

p {
  padding-bottom: 6px !important;
}

情况三、我都使用important! 还没有用，完蛋

那就排查一下是不是被scoped限制了，

被限制了就使用 /deep/ 深度选择器，把它击穿