没有子但没有空的CSS选择器

Question

我想在下面的HTML片段中选择BONKERS。它的区别在于，它是单独存在的，<code>而其所有兄弟姐妹都包含<a>。:empty是显而易见的选择，但由于文本节点而无法使用。我以为我知道这些东西，但这正驱使我疯狂。

 <ul class="Reference">
    <li class="level4">
        <code class="active-voice">
            <a href="some/url/x" version="2">
                mauve 
            </a>
    </code>
    <li class="level8">
        <code class="active-voice">
            BONKERS 
        </code>
    </li>
    <li class="level9 subclass">
        <code class="active-voice">
            <a href="some/url/c" version="2">
                cerise 
            </a>
    </code>
    </li>
</ul>

我需要一个纯CSS解决方案（不能选择JS），并且无法控制源HTML。

！

Answer 1

您可以按照这种方法。code通过所需的CSS 设置元素的样式，然后重置可在样式中继承的CSS样式，anchor即：

CSS：

code {
    color: green;
    font-weight: bold;
}
code a{
    color: red;/*Reset any inheritable css*/
    font-weight: normal; /*Reset any inheritable css*/
}

您可能不需要重置所有样式，因为并非所有样式都anchor从code元素继承

这是您可以真正考虑的一种解决方案。