CSS：选择包含特定单词

想象一下下面的例子中链接的第一次出现：CSS：选择包含特定单词

<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%; 
}

来源

2014-10-07 Morpheus

CSS无法基于内容或属性进行选择...所以不能。请记住，CSS从右向左选择，所以如果它不是'：first-child'，选择器将失败，依此类推。 – 2014-10-07 15:06:46

我有一个希望，现在你已经搞砸了我的生活:)谢谢@Paulie_D – Morpheus 2014-10-07 15:08:58

你不能做到这些......

我不知道这是否会帮助你，但你可以选择大家，是不是的第一次出现，使用一般的兄弟选择......这样你可以从他们的休息不同，第一ocurrence的造型：

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

来源

2014-10-07 15:21:37 LcSalazar

谢谢，这正是我发现自己:) – Morpheus 2014-10-07 15:54:58

CSS：选择包含特定单词

回答

相关问题