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

当其父级具有特定类时，我需要重写子级颜色

.parent{
宽度：100%；
}
.parent>.child{
颜色：黑色；
}
.parent>.child.blue{
颜色：蓝色；
}
.parent.error{
颜色：红色！重要；
}
.parent.error>.child{
颜色：红色！重要；
}

儿童#1
儿童#2

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

因此，

！重要信息

零件是使工作正常所必需的

或者，您可以将CSS定义重新考虑为相反的定义。 “.blue”仅在父级的类不包含

.error

时生效

快速线索-类似于非恐怖案件的线索：

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

---

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

因此，

！重要信息

零件是使工作正常所必需的

或者，您可以将CSS定义重新考虑为相反的定义。 “.blue”仅在父级的类不包含

.error

时生效

快速线索-类似于非恐怖案件的线索：

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

---

当使用jquery$（'.parent'）.addClass（'error'）向父类添加“error”时，只有子类#1的颜色更改为红色-->否，两者都将更改为红色，因此无需执行任何操作，它不会将子类#2的颜色更改为红色，因为

.parent>.Child.blue{color:blue；}

（至少不在Chrome中）。只有我添加了这种样式（我希望避免）

.parent.error>.child.blue{color:red！important；}

，它才起作用。Vladimir Hala下面的答案是有效的。当使用jquery$（'.parent'）.addClass（'error'）向父类添加“error”时，只有Child#1的颜色变为红色-->否，两者都将变为红色，因此无需做任何操作，它不会因为

.parent>而将Child#2的颜色变为红色。Child.blue{color:blue；}

（至少不是在Chrome中）。只有添加了这种样式（我希望避免）

.parent.error>.child.blue{color:red！important；}

。弗拉基米尔·哈拉（Vladimir Hala）下面的回答奏效了。谢谢分享！效果非常好。这是一个很好的折衷方案。谢谢分享！效果非常好。这是一个很好的折衷方案。谢谢。。。