Css 如何使用父div字体颜色而不是子字体颜色

我有一个下拉菜单，里面有一些选项。一个选项有两个文本，text1和text2

查看下面的简化代码，了解悬停选项时会发生什么：

.hh1{颜色：紫色！重要；}
.hh2{颜色：绿色；}
.hh3{颜色：红色；}
测试1
测试2

你不能

！重要信息

仅影响级联。它不能强制子元素属性的值成为

inherit

如果要更改子元素的颜色，则必须显式匹配它

e、 g

---

您尚未在样式标记中放置任何悬停效果，因此未应用悬停效果

看一看，我已经对你的代码做了更改

.hh1{颜色：紫色！重要；}
.hh2{颜色：绿色；}
.hh3{颜色：红色；}
.hh2:悬停{
颜色：紫色；
}
.hh3:悬停{
颜色：紫色；
}
测试1
测试2

在

:hover

上使用

color:inherit

，也可以将

:hover

效果写在一行中

.hh1{颜色：紫色！重要；}
.hh2{颜色：绿色；}
.hh3{颜色：红色；}
.hh2:悬停，.hh3:悬停{
颜色：继承；
}
测试1
测试2

您没有在CSS中定义任何悬停效果hover看起来像这样

.hh2:hover{color:purple}

因此，您需要使用

：hover

来显示当该类元素发生悬停交互时希望发生的情况。最好使用

color:inherit

来避免紫色的重复并使父元素的颜色可用。这也可以写成

。hh2:hover，.hhh3:hover{color:purple；}

您使用

，

说这个类和这个类使用这个颜色哦，我刚刚意识到如果我添加：.hh1*{color:purple！important；}它将变为紫色。这也是一个好的解决方案吗？

.hh1, .hh1 > .hh2 { color: purple; }