用于定位第 4、第 5、第 6、... 的 CSS 选择器答案

【问题标题】：CSS selector for targetting the 4th, 5th, 6th, ... of something用于定位第 4、第 5、第 6、... 的 CSS 选择器
【发布时间】：2015-02-26 19:16:39
【问题描述】：

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

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

只有紧接在列表中的lis 内的a 标记中的第一个、第二个和第三个不会成为目标，而其他的则是目标。

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

【问题讨论】：

你试过:nth-child()吗？
如果你能确定你想要特别注意的项目，你不能给他们添加一个类吗？

标签： html css css-selectors

【解决方案1】：

试试这个：DEMO。

CSS：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

我想你在找这个：

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

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

或者如果你想选择和父li：

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

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

【讨论】：