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

【问题标题】：How to hide an anchor tag by href #id using css如何使用css通过href #id隐藏锚标签
【发布时间】：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;
}

知道怎么做吗？

【问题讨论】：

标签： html css hide anchor href

【解决方案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;}所以你不要把网站上的所有主播都弄乱了！

【讨论】：