指定特定类时强制 div 子文本颜色

Question

当其父级具有特定类时，我需要覆盖子级颜色。

.parent {
  width: 100%;
}

.parent>.child {
  color: black;
}

.parent>.child.blue {
  color: blue;
}

.parent.error {
  color: red !important;
}

.parent.error>.child {
  color: red !important;
}

<div class="parent">
  <div class="child">Child #1</div>
  <div class="child blue">Child #2</div>
</div>

当使用 jquery $('.parent').addClass('error') 添加带有“错误”的父类时，只有 Child #1 颜色变为红色。 Child #2（在其班级中有额外的 blue）<div class="child blue">Child #2</div> 保持蓝色。

问题是，如何在不为错误类指定.parent.error > .child.blue 的情况下强制Child #2 将其颜色更改为红色。

/*If this style is added, it will work*/
.parent.error > .child.blue {
    color: red !important;
}

谢谢...

Answer 1

没有更深入的头脑风暴，我的第一反应是： CSS 基本原则说 - 定义越接近，优先级越高。

因此，!important 部分是使事情正常运行所必需的。

或者，您可以将 CSS 定义重新考虑为相反的定义。 '.blue' 仅在父类不包含 .error时生效。

快速提示 - 对于非错误案例，类似这样：

.parent:not(.error) > .child.blue {
color: blue; 
}