CSS 仅当存在另一个同级时才选择同级答案

【问题标题】：CSS Selecting a sibling only when another sibling is presentCSS 仅当存在另一个同级时才选择同级
【发布时间】：2020-08-21 11:38:35
【问题描述】：

我有以下 HTML：

    <nav class="SecondaryNav sideMenu">
        <ul class="Nav_TopUL">
            <li class="Nav_LI">
                <div class="Nav_ItemWrapper">
                    <a class="Nav_A">
                        <img class="Nav_Img" alt="media image">
                        <span class="Nav_Span"></span>
                        <span class="Nav_SubMenuIndicator"></span>
                    </a>
                    <ul class="Nav_SubUL">
                        <li class="Nav_LI">
                            <div class="Nav_ItemWrapper">
                                <a class="Nav_A">
                                    <span class="Nav_Span"></span>
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="Nav_LI">
                <div class="Nav_ItemWrapper">
                    <a class="Nav_A">
                        <img class="Nav_Img" alt="media image">
                    </a>
                    <ul class="Nav_SubUL">
                        <li class="Nav_LI">
                            <div class="Nav_ItemWrapper">
                                <a class="Nav_A">
                                    <span class="Nav_Span"></span>
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </nav>

我要选择的是具有“Nav_SubUL”类的 UL，但仅当它是具有“Nav_A”类的“a”的兄弟时，该 UL 具有图像和具有“.Nav_Span”类的跨度

这是一口我希望它有意义！

这是我迄今为止尝试过的，但运气不佳。 CSS 不是我的强项，所以这可能有一个非常明显的答案，但我一辈子都做不到。

.SecondaryNav.sideMenu .Nav_A > .Nav_Img + .Nav_Span + .Nav_SubMenuIndicator ~ .Nav_SubUL {
    margin-top: 265px;
}

.SecondaryNav.sideMenu .Nav_A > .Nav_Img + .Nav_Span ~ .Nav_SubUL {
    margin-top: 265px;
}

提前谢谢大家

【问题讨论】：

我在这里只看到Nav_SubUL 的一个实例。您的代码中是否还有其他您未包含在内的内容？
无论如何，您要做的事情很复杂，您需要一个“前一个兄弟”选择器和一个“父”选择器，不幸的是，这两者都不存在.您将需要重新设计标记或应用类的方式，或者您需要使用 JavaScript 来检测何时应用您希望它们具有的样式的某些类。
是的，对不起，我省略了整个导航结构，所以我没有用 html 填充屏幕。 Nav_Li 重复了 x 次，有导航链接，A 有时只会有一个图像，而在这些情况下，我需要调整 Nav_SubUL 的边距。我希望这会有所帮助并且有意义。 :)
最简单的解决方案是将Nav_Img 之类的自定义类放在带有Nav_LI 的元素上，你知道它会有图像。然后你可以做.Nav_Li.Nav_Img .Nav_SubUL {} 之类的，否则你需要我提到的 JS（或者对 HTML 进行完全重新设计）。
如果您愿意接受 JS 是答案，我可以提供重复的目标以将问题链接到这将解决您的问题。

标签： html css

【解决方案1】：

最后我通过在父导航元素上应用一些额外的类来解决这个问题。一如既往地感谢大家的帮助和建议。有时，您所需要的只是一个乐于助人的社区，为您提供所需的推动，让您获得结果。再次感谢。编码愉快！

【讨论】：

【解决方案2】：

我认为你可以选择一些东西

a.Nav_a ~ ul.Nav_SubUL {
    color: pink;
}

【讨论】：

这不满足a元素需要包含一个图像后跟一个具有特定类名的span的要求。
真的！我误解了这个问题

【解决方案3】：

你可以去

a.Nav_a ~ ul.Nav_SubUL {
    
}

正如 dantefff 提到的，但您不能仅使用 css 检查 a.Nav_a 的子级 - 您必须使用 javascript。或者对你的 div 和它们的类做一些不同的事情。

【讨论】：