特定文本的 CSS 选择器 [重复]

Posted 2023-03-06

【中文标题】特定文本的 CSS 选择器 [重复]

【英文标题】：CSS selector for specific text [duplicate]

【发布时间】：2014-01-08 06:16:29

【问题描述】：

<a href="#">Get Here</a>

我需要使用 css (display:none) 隐藏上面的链接。如何选择它（即链接到“Get Here”文本）

【问题讨论】：

@j08691 这不是重复的。B'cos 解决方案是唯一不使用 jQuery 的解决方案。

关键是没有可以根据元素内容进行选择的 CSS 选择器。然而。

@j08691 是的，同意。但是有解决方法:)

【参考方案1】：

使用 CSS3，您还可以使用 a[rel="#"] display:none

【参考方案2】：

不可能根据元素的内容来定位元素。 但是，可以根据其链接定位href：

<a href="go/there.html">Get Here</a>

a[href="go/there.html"]

如果您的 href 中可以包含 # 以外的值，则此方法可能有效。

【参考方案3】：

如果您需要在文本出现时自动执行此操作（并且您无法控制文本），请按照 asku 的建议使用 jQuery。

如果您可以控制文本，则向该链接添加一个类并为其设置样式要简单得多。您可以将相同的类添加到所有需要隐藏的链接。

HTML：

<a href="#" class="hide">Get Here</a>

CSS：

.hide display: none

【参考方案4】：

你不能用 CSS 做到这一点。但即使你可以，你也不应该这样做，真的。绝不。甚至忘记为此使用javascript（如果由我决定，我会从jQuery中排除:contains过滤器）。这是非常非常不好的样式设置方法。因为明天您更改链接文本并且您的代码中断。你真正需要做的是使用类：

<a href="#" class="get-here">Get Here</a>

使用下一个 CSS：

.get-here 
    display: none;

【参考方案5】：

不使用 CSS，而是使用 jQuery：

$("a:contains('Get Here')").hide();

或

$("a:contains('Get Here')").css('display','none');

【讨论】：

我不能只使用css和伪选择器吗？

@Sampath：不，看看重复项。

@Adrift 对于愿意的心来说，没有什么是不可能的。请检查“@paceaux”的答案:)

【参考方案6】：

不，对于 css 是不可能的。 Css 用于样式元素，而不是选择文本。你可以用 jquery 来做：

$("a:contains('Get Here')").hide();