html - No-Children-But-Not-Empty 的 CSS 选择器

Question

我想在下面的 HTML 片段中选择 BONKERS。它的区别在于它在 <code> 中是单独的。 block ，而其所有 sibling 都包含 <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

根据您打算应用的 CSS 属性，您可能会也可能不会这样做。例如，如果你要应用类似 color 的东西，你可以简单地将它设置为所有 code 元素并在 code a 中重置它，假设所有文本都包含在 a 中，并且没有溢出到 code 中。然而，这仅适用于少数属性(主要是字体属性)。

否则，如果您尝试选择不包含 a 子元素的 code 元素，这里纯 CSS 的作用不大。 jQuery 有 code:not(:has(> a))(或者，对于任何没有子元素的任意 E 元素，E:not(:有(> *))), 但that's not coming to CSS anytime soon ，并且 Selectors 4 没有为“没有子元素的元素”提供任何其他内容。

“呸!”是对的。