指定特定类时强制 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 定义。仅当父类不包含 .error.blue 时，'.blue' 才会生效。

快速线索 - 对于非错误情况，类似这样：

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