css - CSS选择器仅适用于深度最接近的后代

我有两个类hovershow和hoverhidden。
hoverhidden元素应该至少有一个hovershow祖先，并且只在悬停最近的hovershow祖先时才显示。

.HoverHidden
{
    display: none;
}

.HoverShow:hover .HoverHidden
{
    display: initial;
}

<div class="HoverShow">
    <div>
        Hover here to see message!
        <div class="HoverHidden">
            message!
        </div>
    </div>
</div>

上面的工作很好。
但是当hoverhidden有几个hovershow祖先时，事情变得更加复杂。

<div class="HoverShow">
    <div>
        Hover here to see message!
        <div class="HoverHidden">
            message!
            <div class="HoverShow">
                Now hover here to see another message!
                <div class="HoverHidden">
                    another message!
                    <br />
                    Hey, wait... you shouldn't see that yet!
                </div>
            </div>
        </div>
    </div>
</div>

我如何调整我的css使其工作？
请注意，我没有关于hovershow隐藏在其最近的hovershow祖先下的深度的规则。

最佳答案

你对纯css最大的问题是你最后的警告“请注意，我没有关于hovershow隐藏在其最接近的hovershow祖先之下的深度的规则。”如果它真的可以在理论上是无限的，那么就不存在纯css解决方案。如果在HoverShow和HoverHidden之间的嵌套级别有一些合理的、实际的限制，那么您可以这样做css（这允许多达3个中间级别的嵌套，因此您可以看到这对于太多的级别是多么不切实际）：

.HoverShow:hover > .HoverHidden,
.HoverShow:hover > :not(.HoverShow) > .HoverHidden,
.HoverShow:hover > :not(.HoverShow) > :not(.HoverShow) > .HoverHidden,
.HoverShow:hover > :not(.HoverShow) > :not(.HoverShow) > :not(.HoverShow) > .HoverHidden
{
    display: initial;
}

See a fiddle example.
请注意
一个简单的子代.HoverShow:hover :not(.HoverShow) .HoverHidden将不起作用，因为它将对任何没有.HoverShow类的子代元素有正面的点击，因此this fiddle shows，第三个组确实显示在第二个组的悬停上，因为中间的嵌套创建元素“没有”在它们上面有.HoverShow类。