指定特定类时强制 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颜色变为红色。2 号孩子（班上有额外的蓝色<div class="child blue">Child #2</div>）保持蓝色。

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

/*If this style is added, it will work*/

.parent.error > .child.blue {

    color: red !important;

}

谢谢...

Answer 1

没有进行更深入的头脑风暴，我的第一反应是：CSS 基本原理说 - 定义越接近，它的优先级就越高。因此，该!important部分对于使事情正常进行是必要的。或者，您可以重新考虑相反的 CSS 定义。仅当父类不包含&nbsp;.error.blue 时，'.blue' 才会生效。快速线索 - 对于非错误情况，类似这样：.parent:not(.error)&nbsp;>&nbsp;.child.blue&nbsp;{ color:&nbsp;blue;&nbsp; }