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：選擇包含特定單詞

回答

相關問題