浏览器和开发工具忽略了 CSS答案

【问题标题】：css is being ignored by browser and devtools浏览器和开发工具忽略了 CSS
【发布时间】：2020-04-18 19:58:39
【问题描述】：

同时使用 Chrome 和 Firefox，由于某种原因，某些 css 被忽略了。同样在 devtools 中，它也没有显示为 css 规则。

以下以相关颜色显示，带或不带 .e-rowcell 前缀。此外，在开发工具 -> 样式中检查此元素时，我会从我的文件中看到相关的 css 样式。

.e-rowcell.received {
    color: #66DA26 !important;
  }

<div data-v-72a15e66="" class="e-rowcell received">blah blah</div>

对于上面相同的 css，以下显示的颜色不正确。它位于表格/网格的单元格内。在开发工具中检查此元素时，我在列表中看不到它。

<td class="e-rowcell received" role="gridcell" tabindex="-1" aria-label="$16.24 column header Feb" aria-colindex="2" index="7" style="text-align: center;">$16.24</td>

我知道这不是很多信息，但我不知道为什么会发生这种情况以便添加更多相关数据。让我知道要查找的内容，我会添加更多信息。

换句话说，为什么浏览器会忽略以下代码class="classA classB" 中的classB，即使classB 定义正确？谢谢

【问题讨论】：

您能否提供一个minimal reproducible example 来证明该问题？我制作了a fiddle，但 div 和 table 都以相同的颜色显示。
您的样式中有scoped 属性吗？当您使用scoped 时，生成的css 规则也会引用data-v 属性值，如果您有想要为组件的子代申请的css，可能会导致问题
@arieljuod，你是最棒的！请发表您的评论作为答案，以便我接受，谢谢！

标签： css vue.js

【解决方案1】：

当你在组件的样式上使用scoped属性时，生成的css规则也会引用data-v属性值，如果你有想要为组件的子级应用的css可能会导致问题

如果可能，您可以删除scoped 属性或将样式移至子组件

【讨论】：

谢谢！谢谢！谢谢！