Question

我正在尝试将一些css应用于WordPress网站上当前查看的菜单项。我可以将css应用于整个项目，但是想要专门用于最后一个字符。

有没有人对如何解决这个问题有任何想法？

感谢。

Answer 1

使用纯CSS无法实现跨浏览器解决方案。

您可以使用PHP或javascript来获取最后一个字符并为其设置样式，或者您可以将该最后一个字符包装在另一个元素中，如<span>，并使用css正常设置样式。

编辑：这是javascript方法：

<p class="test">This is a test</p>

var targets = document.getElementsByClassName('test');
for(i=0; i<targets.length; i++) {
    var html = targets[i].innerHTML;
    targets[i].innerHTML = html.substr(0, html.length-1)
        + "<span class='lastChar'>"
        + targets[i].innerHTML.substr(-1)
        + "</span>";
}

<强> Fiddle Demo

Answer 2

正如Felix所说，使用纯CSS没有跨浏览器解决方案来实现它。我建议编写简单的js代码来分割菜单项，并将class添加到最后一个字母。

$('document').ready(function() {
  var item = $('.current-menu-item').children().html();
  $('.current-menu-item').children().html(item.substr(0, item.length - 1) + '<span class="last">' + item.substr(-1) + '</span>');
});

将css应用于WordPress菜单项中的最后一个字符

2 个答案: