为不共享相同直接父元素的元素选择第 n 个元素答案

【问题标题】：Select nth element for elements that do not share the same immediate parent为不共享相同直接父元素的元素选择第 n 个元素
【发布时间】：2015-07-14 17:03:24
【问题描述】：

如何在以下 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
这和你的 cmets/answers 证实了我的信念，即今天不可能...... :(

【问题讨论】：

我真的怀疑实现这一目标的可能性。不管我对 CSS 知之甚少，我们只能定位兄弟姐妹（使用 nth- 或 + 或 ~ 选择器）而不是跨多个父级的元素。 Less 编译器在编译时不知道有多少元素可用，它不能做任何 CSS 不支持的事情，因为最终 Less 会被编译成 CSS。
您将需要 JavaScript。
stackoverflow.com/questions/1777357/css-rule-based-on-content
出于好奇，您为什么要生成单独的列表，一开始就没有文字或标题将它们分开？似乎从语义上讲，它们作为单个列表的一部分或带有一些文本来指示它们为什么位于单独的列表中是最有意义的。
听到 :nth-match() 被归入 :nth-child() 你会很失望，因为它也要求元素是兄弟元素——从这个意义上说，原始名称具有误导性。

标签： css css-selectors less

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

您不能根据标签的内容创建 css 规则... 话虽如此.... 看看这个：

link

基本思想是不要将内容添加到标签内，而是像这样作为标签属性：

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

然后在你的 CSS 中

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

那么你可以按如下方式定位它：

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

CanIUse 快速搜索显示任何版本的 IE 都不支持“attr”css 技术（抱歉）：

link:

【讨论】：

感谢您的回答！我不够清楚：我想按索引而不是内容来选择。
"attr" 不是正确的搜索词 - 列出的结果中没有一个是关于 CSS 的。正确的地方是这里caniuse.com/#feat=css-gencontent，它说它在IE8+中受支持。