无子项但非空的CSS选择器

fsi0uk1n  于 2023-04-22  发布在  其他
关注(0)|答案(3)|浏览(210)

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

qvsjd97n

qvsjd97n1#

根据你想要应用的CSS属性,你可能会也可能不会这样做。例如,如果你要应用像color这样的东西,你可以简单地将它设置为所有code元素,然后在code a中重置它。假设所有的文本都包含在a中,而没有溢出到code中。这只适用于少数属性,但是(主要是字体)。
否则,如果您试图选择不包含a子元素的code元素,则这里没有太多纯CSS的方式。(或者,对于任何没有子元素的任意E元素,E:not(:has(> *))),但这不会很快出现在CSS中,选择器4没有为“没有子元素的元素”提供任何其他内容。
“呸!”是对的。

dsf9zpds

dsf9zpds2#

你可以按照这个方法。用你想要的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元素继承所有样式
这是一个你可以真正考虑的解决方案。

bis0qfac

bis0qfac3#

使用选择器:

code:not(:has(a))

相关问题