Question

I have the following link which will be rendered inside my breadcrumb navigation:-

<a class="breadcrumbNode" href="http://******/kb/CustomerKB/_layouts/15/listform.aspx?ListId=%7B9A25812B%2DE8BA%2D4085%2D95D0%2D9E05CF3DC441%7D&amp;PageType=0&amp;RootFolder=%2Fkb%2FCustomerKB">CustomerKB</a>

so is there a way using CSS to hide the link which have the following text CustomerKB ??

Answer 1

如果要隐藏包含特定文本的所有元素，则必须使用Javascript。我能想到用CSS做的唯一方法就是在你要隐藏的链接上添加另一个类，或者将文本包装在另一个标签中，并根据文件中的内容为这个标签赋予特定的类，你似乎没有我想这样做。

您不想使用JS的任何特殊原因？

如果你可以使用Javascript，我会做一些像

这样的事情

document.getElementsByClassName("breadcrumbNode").forEach(function(item) {
    if (item.innerHTML === "whatevertext") {
        item.classList.add("hidden")
    }
});

Answer 2

您可以使用* =选择器根据链接进行选择。

a[href*="CustomerKB"] {
    display:none
}

如果您想根据锚标记的实际文本内容进行选择，那么您需要使用类似jquery的内容。

$("a:contains('CustomerKB')").hide();

如何选择然后隐藏<a> link based on its text

2 个答案: