选择列表中的第一个嵌套子项,但不选择子项

时间:2014-09-17 09:46:01

标签: css css3 nested css-selectors html-lists

我有一个无序的列表,如:

<ul>
    <li>Element one
        <ul>
            <li><a>Element two</a>
                <ul>
                    <li><a>Element three</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

现在,如果我尝试选择“元素二”的<a> - 元素。我会这样做:

ul ul li:first-child > a

这也将选择以下嵌套的<a>元素。看到这个小提琴:

http://jsfiddle.net/38ksdpw3/

如何解决这个问题?

2 个答案:

答案 0 :(得分:14)

您可能需要向第一个<ul>元素添加标识符,然后按parent > child children selector遍历子树,如下所示:

<强> Example Here

ul.main > li > ul > li:first-child > a {
    background:red;
}

答案 1 :(得分:1)

实际上你不能在这样的结构中区分它。对于这两个链接,您在没有特定父级的情况下应用了ul ul li:first-child > a。所以你应该考虑使用类(至少为父母而不是标记)。