使用条件定位最后一个 A 元素

Question

我需要定位最后一个 <a> 元素，但要有一些条件。在这种情况下，文本是通过 CMS 创建的，它限制了我添加 class 的选项。我创建了一个 jsfiddle 来显示我的问题。最后一个 <a> 必须在它的 :after 中有一个很棒的字体角度，而其他 <a> 元素则没有。我不能使用 :last-child a 之类的东西，因为 user/text 编写器默认情况下不必编写 link。在第一段之后还有另一段的可能性。所以没有什么是默认的，但最后一个 <a> 元素独立于带有一些实际文本的段落必须有一个图标。

这有点难以解释，但 jsfiddle 会自行解释，所以请看一看。如果有 CSS 解决方案就好了。如果不是 jQuery 排在第二位。

提前致谢！

Answer 1

您可以定位最后一个 p 标签。

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

Answer 2

据我所知，仅使用 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;
}

它向所有 <a> 元素添加一个 .icon class，这些元素未与父元素中的文本内联包装。

使用条件定位最后一个 A 元素

Target the last A element with conditionals

html

css

content-management-system