針對具有條件的最後一個A元素

我需要針對最後的<a>元素，但有一些條件。在這種情況下，文本是通過CMS創建的，這限制了我添加類的選項。我創建了一個jsfiddle來顯示我的問題。最後的<a>必須有一個字體超棒的角度，它的:after其他<a>元素沒有。我不能使用:last-child a之類的東西，因爲用戶/文本編寫器不需要默認編寫鏈接。第一段之後還有另一段的可能性。所以沒有什麼是默認的，但最後的<a>元素從段落獨立與一些實際的文字必須有一個圖標。針對具有條件的最後一個A元素

這很難解釋，但jsfiddle會解釋自己，所以請看看。如果有一個CSS解決方案，那會很好。如果不是jQuery第二。

在此先感謝！

來源

2016-12-17 Wilco

：最後一個類型的coud是一個提示，但它真的是真的嗎？ https://jsfiddle.net/6xLpz6nj/10/用戶填充的容器是否有ID，類，特定的包裝或始終坐在模板樹中的相同位置？。我們沒有足夠的信息有效回答:) –

實際上有一個包含所有段落的類的容器。但那裏沒有課程 – Wilco

沒關係，它擁有的鏈接怎麼樣（href或title屬性），他們有共同和特定的東西嗎？ ....沒有你的真實情況下，它只會是有趣的答案，你會得到 –

據我所知不能單獨使用CSS來完成。

怎麼樣的JavaScript：

var element = document.getElementsByTagName("a"); 
for(var i=0; i < element.length; i++) { 
    var el = element[i] 
    var x = el.parentNode.innerText.length; 
    var y = el.innerText.length 
    if (x === y) { 
     el.classList.add('icon'); 
    } 
}

CSS：

.icon::after{ 
    content: "\f105"; 
    margin-left:5px; 
    font-family: FontAwesome; 
    background-color: transparent; 
}

它增加了一個.icon類未內嵌在父元素文本包裹所有<a>元素。

來源

2016-12-17 14:15:10 unitario

正是我需要的！謝謝！ – Wilco

有沒有可能指定哪個''？它總是在一個類「塊」的容器中。 – Wilco

在CSS文件中寫入：'.block .icon :: after {...}'。這對你有用嗎？是否有一個容器帶有「塊」或幾個類？ – unitario

您可以定位最後的p標籤。

p:last-of-type a::after{ 
    content: "\f105"; 
    margin-left:5px; 
    font-family: FontAwesome; 
    background-color: transparent; 
}

來源

2016-12-17 13:29:42

適用於文檔任何部分的任何最後一個p，我們需要更多詳細信息...看到我的評論我選擇不作爲回答:) –

正如我試圖解釋。有些情況下，在第一段之後沒有''元素，但第一段中的一段不應該得到圖標。 – Wilco

@wilco，你能否詳細說明你的模板結構（看我的評論），如果你想要一個有效的答案 –

針對具有條件的最後一個A元素

回答

相關問題