针对具有条件的最后一个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元素

回答

相关问题