Html 使用或压缩多个CSS类选择条件

我必须将样式应用于类

。我的图标
（第三级元素-图像）位于
h1、h2或h3
（第二级元素-标题）的悬停位置，它位于
容器中
（第一级元素-Div），下面是代码

.container > h1:hover > .my-icon,
.container > h2:hover > .my-icon,
.container > h3:hover > .my-icon
 {
    display:inline;
}

有没有更简单（或紧凑）的方法？比如

.container > (h1|h2|h3):hover > .myicon {

}

或者可能是以下方式

.container > (h1:hover|h2:hover|h3:hover) > .myicon {

    }

或任何其他紧凑方式？
这将通过即将推出的选择器实现：

.container > :matches(h1, h2, h3):hover > .myicon {
    display: inline;
}

虽然目前这在多个浏览器中以
：any（）
的形式在内部实现，但它是通过前缀实现的，因此使用它毫无意义，因为它会迫使您进一步膨胀代码，以避免以下规则：

同时，如果您没有访问支持规则嵌套的预处理器的权限，并且无法更改标记，则需要继续使用现有的预处理器

或者，您也可以根据标记的假设删除选择器的某些部分。例如，如果
.myicon
只会出现在
.container>中：matches（h1、h2、h3）
中，那么您可能不需要查找
：matches（h1、h2、h3）
-您可以这样做：

.container > *:hover > .myicon {
    display: inline;
}

（
*
用于说明，但不是必需的；
:hover
本身就是有效的CSS，就像
.container
和
.myicon
一样。）
使用类作为标题，然后就可以执行
。标题类：hover.my icon{display:inline；}
-这就是webkit中类的全部意义，它将是
.container>：-webkit any（h1、h2、h3）：hover>。我的图标{…}
是的，但正如我所说，由于前缀的原因，使用它是毫无意义的。我用一个例子更新了我的答案-我认为这是一个更好的演示场景，因为所讨论的选择器有三个部分，当您将
：matches（）
添加到混合中时，您还将得到三个单独的规则。当你被迫重复你的声明块时，你可以立即看到膨胀。谢谢@BoltClock的解释。
.container > *:hover > .myicon {
    display: inline;
}