无子项但不为空的 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(> *))

），但是

Answer 2

你可以按照这个方法。通过您想要的任何 CSS 设置

code

元素的样式，然后重置那些可在

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

元素继承

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

Answer 3

使用选择器：

code:not(:has(a))