jquery - 使用 CSS 选择没有子列表的列表项

Question

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

Answer 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/