使用 CSS 选择没有子列表的列表项答案

【问题标题】：Selecting a list item that doesn't have a sublist with CSS使用 CSS 选择没有子列表的列表项
【发布时间】：2014-12-07 20:19:27
【问题描述】：

我想知道是否可以使用纯 CSS 选择不包含任何 ul 或 ol 的列表项。请注意，列表项几乎总是包含一个锚点，这是允许的。也可以使用 CSS3。我知道如何使用 jQuery 来做到这一点，但我想使用 CSS(3)。

【问题讨论】：

我很确定用纯 CSS 是不可能实现的。另外，请考虑发布相关代码。
请提供任何代码。我不知道你在找什么。
发布您的 jquery 选择器或您使用的所有代码
将很快发布代码。耐心，宝贝。（我现在在上课，心不在焉，所以我立即从我的移动设备上发布了这个。很快就会添加代码。）
CSS selector for "foo that contains bar"?的可能重复

标签： jquery css list css-selectors

【解决方案1】：

首先，CSS 中（目前）没有选择器来检查元素是否包含另一个元素。（我用:not() 玩了一下，但没用。）

但是有一个技巧可以做到这一点，:only-child 选择器。如果你可以说你的列表中总会有一个<a> 标记并且除了<ul> 之外没有其他元素，你可以这样做：

HTML

<ul class="list">
    <li><a href="#">Test</a></li>
    <li>
        <a href="#">Test</a>
        <ul>
            <li>Test2</li>
        </ul>
    </li>
</ul>

CSS

.list > li > a:only-child { color: red; }

因此，您选择了所有 <a> 标记，它们是其父标记的唯一子标记。

这可能不是完美的解决方案，但如果你有一个像我的 HTML 代码这样的结构，它就会工作。

看看我的 jsfiddle 看看解决方案：http://jsfiddle.net/2Lxaah61/

【讨论】：

这其实是经过深思熟虑的。正是我真正需要的。 +1 并接受！谢谢！

【解决方案2】：

你不能直接检查一个列表是否包含子列表。

但可能的解决方法是对所有 li 元素应用 CSS 类：

.list > li { background:gray;}

现在你可以用下面的一个覆盖这个 css：

.list > li:only-child { background:Red;}

希望对您有所帮助！

【讨论】：