CSS:选择第一次出现的包含特定单词的链接

Question

想象一下下面的例子:

<a href="/test/test.html"></a>
<a href="/test/test.html"></a>
<a href="/test/test.html"></a>
**<a href="/info/test.html"></a>**
<a href="/info/test.html"></a>
<a href="/info/test.html"></a>

有没有可能得到第四项？

注意:我只需要 CSS 解决方案，因为我已经知道在 JS 中的做法。不能使用 nth-child 或 nth-of-type 因为它可以是列表中的任何位置。所有链接只有一个包装容器。

这就是我如何努力实现我想要的:

a[href*="/info/"]:first-child:before {
    content: "Pages";
    display: block;
    width: 100%;
    background: #b1be2d;
    color: #fff;
    font-size: 120%; 
}

Answer 1

你不能完全那样做......

我不知道这是否对你有帮助，但你可以选择所有不是第一次出现的人，使用一般的兄弟选择器...这样您可以将第一次出现的样式与其余样式区分开来:

a[href*="/info/"] {
    /* style for every occurence */
}

a[href*="/info/"] ~ a[href*="/info/"] {
    /* style for every occurence that is not the first one */
}

JsFiddle Example