如何使用css通过href #id隐藏锚标签

Posted 2023-03-05

【中文标题】如何使用css通过href #id隐藏锚标签

【英文标题】：How to hide an anchor tag by href #id using css

【发布时间】：2012-02-28 05:52:31

【问题描述】：

我有不同的带有 href=#ids 的锚标签，我需要使用通用 css 规则隐藏它们，

Content xxxxxxxxx <a href="#tab1">Table 1</a>.Content xxxxxxxxxxxx <a href="#tab2">Table 2</a>

我试图使用这样的东西：

#wrap a='#tab1'
display:none;

知道怎么做吗？

【参考方案1】：

尝试使用属性选择器：

a[href='#tab1'] display: none 

甚至简单

[href='#tab1'] display: none 

http://www.w3.org/TR/CSS2/selector.html

【讨论】：

但是如果锚点有display: none，它就不再处于活动状态（这意味着，单击指向该锚点的链接不会例如向下滚动）。对于visibility: hidden，锚仍然使用相同的空间。有什么解决办法吗？

我不明白评论：为什么您希望用户能够点击隐藏的链接？

链接本身没有隐藏，只有它引用的锚点。问题是（在生成 HTML 的系统中）我无法访问我想要滚动到的原始文本，我不想添加一些额外的文本只是为了能够放置一个锚点。

啊。我知道了。你可以试试：position:absolute; visibility: hidden

【参考方案2】：

假设#wrap 是父母的ID，您可以使用：

/* Hide all anchor tags which are children of #wrap */
#wrap a display:none; 

/* Hide all anchor tags which are direct children of #wrap */
#wrap > a display:none; 

/* Hide a specific anchor tag (Probably won't work in IE6 though) */
a[href="#tab1"] display:none; 

【参考方案3】：

#wrap a[href="#tab1"]
display:none;

【讨论】：

谢谢@frazras 你救了我的命

【参考方案4】：

为什么不为锚创建一个 CSS 类并使用该类隐藏它们？

<a href="#tab1" class="hiddenTab">foo</a>

在你的 CSS 中：

a.hiddenTab visibility:hidden; display:none;

您想要隐藏的所有锚点都只需使用“class='hiddenTab'”

【参考方案5】：

如果你想隐藏所有设置了 href 的标签，你可以这样做：

a[href]  display: none; 

【参考方案6】：

尝试使用a[href*="#"] display: none; 这个选择器在锚点的href 属性中标识一个#，如果找到它就会应用样式

您可以通过其他方式使用它，例如 header a[href*="#"] display: none;所以你不要把网站上的所有主播都弄乱了！