Question

如何在以下HTML结构中选择第4个（或任何特定的）li元素？这甚至可能吗？（根据我的理解:nth-child和:nth-of-type要求元素为兄弟姐妹。）

<div>
    <ul>
        <li>Apple</li>
        <li>Banana</li>
        <li>Pear</li>
    </ul>
    <ul>
        <li>Melon</li>
        <li>Mango</li>
    </ul>
    <ul>
        <li>Strawberry</li>
    </ul>
</div>

上述结构是动态的，因此我不知道有多少ul个元素，也不知道每个元素包含多少li个元素。还有办法在页面上选择第n个li元素吗？

JsFiddle：click

我正在使用LESS。 LESS中有什么东西可以帮助我吗？

更新：
我刚刚找到了支持的:nth-match CSS4伪类： CSS nth-match doesn't work
这和你的评论/答案证实了我的信念，即今天不可能...... :(

Answer 1

由于:nth-child和其他类似的选择器基于兄弟元素进行匹配而CSS没有父级选择器，因此这是不可能的。
Less只是一种编译成CSS的语言，它实际上并没有将任何新功能添加到CSS中简单的替代方法是使用Javascript。

Answer 2

AFAIK（我已经和我的css朋友在一起大约4年了）

您无法根据代码的内容创建CSS规则... 然而那说...... 看看这个：

link

基本思想是不要将内容添加到标记内部，而是添加为标记属性，如下所示：

<li value="some_number"></li>

然后在你的CSS中

li:before{
 content:attr(value);
}

然后你可以按如下方式定位它：

li[value="4"]{
 background-color:red;
}

快速CanIUse搜索显示＆＃34; attr＆＃34;任何版本的IE都不支持css技术（对不起）：

link:

为不共享同一个直接父级的元素选择第n个元素

2 个答案: