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

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

1 个答案: