没有孩子但不是空的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.

FEH!

Answer 1

根据您打算应用的CSS属性，您是否可以执行此操作。color例如，如果您要应用类似的内容，则只需将其设置为所有code元素并将其重置即可code a，前提是所有文本都包含在其中，a而不会溢出到之外code。但是，这仅适用于少数几个属性（大多数是字体属性）。

否则，如果您要选择code不包含a子元素的元素，那么纯CSS的方式就没有太多了。jQuery具有code:not(:has(> a))（或对于任何E根本没有子元素的任意元素E:not(:has(> *))），但是CSS不会很快出现，并且Selectors 4没有为“没有子元素的元素”提供任何其他功能。

“ F！” 是对的。

Answer 2

您可以遵循此方法。code通过您想要的任何 CSS为元素设置样式，然后重置那些可在anchor的样式中继承的 CSS 样式，即：

演示：http : //jsfiddle.net/GCu2D/1062/

CSS：

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

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

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