无子项但非空的CSS选择器

fsi0uk1n 于 2023-04-22 发布在其他

关注(0)|答案(3)|浏览(209)

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

css

来源：https://stackoverflow.com/questions/35077658/css-selector-for-no-children-but-not-empty

3条答案

按热度按时间

qvsjd97n1#

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

赞(0）回复(0）举报 2023-04-22

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

赞(0）回复(0）举报 2023-04-22

bis0qfac3#

使用选择器：