Question

我想知道是否可以选择不包含任何原始CSS或纯CSS的列表项。请注意，列表项几乎总是包含一个锚，这是允许的。 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/

Answer 2

您无法直接检查列表是否包含子列表。

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

.list > li { background:gray;}

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

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

希望这对你有帮助！

选择没有CSS子列表的列表项

2 个答案: