无子但非空的 CSS 选择器答案

【问题标题】：CSS Selector for No-Children-But-Not-Empty无子但非空的 CSS 选择器
【发布时间】：2016-05-06 18:47:44
【问题描述】：

我想在下面的 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。

呸！

【问题讨论】：

目前我想不出任何选择器可以实现这一点。下一级选择器有一个选项。
你想在这里设计什么风格？您是选择a 还是code？
@choz 我正在尝试为“BONKERS”设置样式，仅此而已。
我怀疑@Harry 是对的，这根本不可能。
无法通过内容选择它。 CSS 有伪 :contains() 但他们在 CSS3 中删除了它。您应该使用不同的方法来选择该元素，否则使用 jQuery。有没有考虑过<code data-text='bonker'> BONKER </code>？

标签： html css css-selectors

【解决方案1】：

根据您打算应用的 CSS 属性，您可能会也可能不会这样做。例如，如果您要应用color 之类的内容，您可以简单地将其设置为所有code 元素并在code a 中重置它，假设所有文本都包含在a 中并且没有溢出到外部它在code 内。但是，这只适用于少数属性（主要是字体属性）。

否则，如果您尝试选择不包含 a 子级的 code 元素，那么纯 CSS 的方式并不多。 jQuery 有 code:not(:has(> a))（或者，对于任何没有子元素的任意 E 元素，E:not(:has(> *))），但是 that's not coming to CSS anytime soon，并且 Selectors 4 没有为“没有子元素的元素”提供任何其他内容.

“呸！”是对的。

【讨论】：

@S16：现在有了吗？ ED 自 8 月以来一直没有更新，我找不到任何表明 CSSWG 同意将 :has() 推广到实时个人资料的信息。
嗯。我现在在 Firefox 和 chrome 中使用它。
@S16：这很奇怪。您确定这不是借助 JS 选择器库吗？两种浏览器都没有原生地提供它 AFAIK。
你可能是对的。我在 FF/Chrome 中使用了一个插件，他们必须使用 Sizzle 或类似的东西来做他们的 css 选择器而不是原生 css。

【解决方案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 元素继承

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

【讨论】：

当我们需要根据元素是否有子元素来隐藏元素时，这个解决方案将不起作用。