用于定位第4，第5，第6 ......的CSS选择器

Question

我有一个由内容管理系统吐出的嵌套无序列表，我需要定位下面提到的一组特定元素：

<ul id="some-list">
    <li>
        <a>[...]</a>
        <ul>
            <li>
                <a>[...]</a>             
            </li>
             <li>
                <a>[...]</a>             
            </li>
        </ul>
    </li>
    <li>
        <a>[...]</a>
        <ul>
            <li>
                <a>[...]</a>             
            </li>
             <li>
                <a>[...]</a>             
            </li>
        </ul>
    </li>    <li>
        <a>[...]</a>
        <ul>
            <li>
                <a>[...]</a>             
            </li>
             <li>
                <a>[...]</a>             
            </li>
        </ul>
    </li>    <li>
        <a>Want this targeted</a>
        <ul>
            <li>
                <a>[...]</a>             
            </li>
             <li>
                <a>[...]</a>             
            </li>
        </ul>
    </li>    <li>
        <a>Want this targeted too</a>
        <ul>
            <li>
                <a>[...]</a>             
            </li>
             <li>
                <a>[...]</a>             
            </li>
        </ul>
    </li> 
</ul>

为了使它更通用（如果客户端添加了额外的组件），最好有一个选择器来定位同一级别的任何其他a标签，例如。

<ul id="some-list">
    <li>
        <a>[...]</a>
        <ul>
            <li>
                <a>[...]</a>             
            </li>
             <li>
                <a>[...]</a>             
            </li>
        </ul>
    </li>
    <li>
        <a>[...]</a>
        <ul>
            <li>
                <a>[...]</a>             
            </li>
             <li>
                <a>[...]</a>             
            </li>
        </ul>
    </li>    <li>
        <a>[...]</a>
        <ul>
            <li>
                <a>[...]</a>             
            </li>
             <li>
                <a>[...]</a>             
            </li>
        </ul>
    </li>    <li>
        <a>Want this targeted</a>
        <ul>
            <li>
                <a>[...]</a>             
            </li>
             <li>
                <a>[...]</a>             
            </li>
        </ul>
    </li>    <li>
        <a>Want this targeted too</a>
        <ul>
            <li>
                <a>[...]</a>             
            </li>
             <li>
                <a>[...]</a>             
            </li>
        </ul>
    </li> 
     <li>
        <a>And this one as well</a>
        <ul>
            <li>
                <a>[...]</a>             
            </li>
             <li>
                <a>[...]</a>             
            </li>
        </ul>
    </li> 
</ul>

只有紧接在列表中a内的li标记中的第一个，第二个和第三个标记没有被定位，而其他标记则是。

这是一个小提琴：http://jsfiddle.net/awqub7Lr/

Answer 1

试试这个：DEMO。

CSS：

#some-list li:nth-child(4) a {
    color: red;
}

#some-list li:nth-child(5) a {
    color: red;
}

Answer 2

您可以使用此css定位所有4岁以后的孩子：

#some-list li:nth-child(n+4) a {
    color:red;
}

Answer 3

我认为你在寻找这个：

＆＃13;

＆＃13;

ul > li:nth-child(1n+4) > ul > li > a{
    color: red;
}

＆＃13;

<ul id="some-list">
    <li> <a>[...]</a>

        <ul>
            <li> <a>[...]</a> 
            </li>
            <li> <a>[...]</a> 
            </li>
        </ul>
    </li>
    <li> <a>[...]</a>

        <ul>
            <li> <a>[...]</a> 
            </li>
            <li> <a>[...]</a> 
            </li>
        </ul>
    </li>
    <li> <a>[...]</a>

        <ul>
            <li> <a>[...]</a> 
            </li>
            <li> <a>[...]</a> 
            </li>
        </ul>
    </li>
    <li> <a>Want this red</a>

        <ul>
            <li> <a>[...]</a> 
            </li>
            <li> <a>[...]</a> 
            </li>
        </ul>
    </li>
    <li> <a>Want this red too</a>

        <ul>
            <li> <a>[...]</a> 
            </li>
            <li> <a>[...]</a> 
            </li>
        </ul>
    </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

或者如果您想选择父li：

＆＃13;

＆＃13;

ul  li:nth-child(1n+4){
    color: red;
}

＆＃13;

<ul id="some-list">
    <li> <a>[...]</a>

        <ul>
            <li> <a>[...]</a> 
            </li>
            <li> <a>[...]</a> 
            </li>
        </ul>
    </li>
    <li> <a>[...]</a>

        <ul>
            <li> <a>[...]</a> 
            </li>
            <li> <a>[...]</a> 
            </li>
        </ul>
    </li>
    <li> <a>[...]</a>

        <ul>
            <li> <a>[...]</a> 
            </li>
            <li> <a>[...]</a> 
            </li>
        </ul>
    </li>
    <li> <a>Want this red</a>

        <ul>
            <li> <a>[...]</a> 
            </li>
            <li> <a>[...]</a> 
            </li>
        </ul>
    </li>
    <li> <a>Want this red too</a>

        <ul>
            <li> <a>[...]</a> 
            </li>
            <li> <a>[...]</a> 
            </li>
        </ul>
    </li>
</ul>

＆＃13;

＆＃13;

＆＃13;