HTML 锚点，禁用样式答案

【问题标题】：HTML Anchor, Disable StyleHTML 锚点，禁用样式
【发布时间】：2011-07-29 02:20:21
【问题描述】：

我有一些 html 锚链接代码，与文档的其余部分不同，我希望它看起来不是链接。

有没有一种简单的方法可以禁用将文本包装在锚标记中引起的样式更改，而不必强行使其相同（即，如果我更改正文字体样式，我也不必更改一些其他 :link 的东西）。

【问题讨论】：

除了以下答案之外，您还可以将display: contents 添加到a 锚元素，该元素将采用其内容的样式，这在img 图像的情况下很有用。

标签： html css anchor

【解决方案1】：

将颜色设置为黑色并将文本装饰明确设置为无比对我有用的更具侵略性。

我一直在寻找锚的 CSS 是“良性”的，并且只是融入现有的 CSS。这是我的选择：

a.nostyle:link {
    text-decoration: inherit;
    color: inherit;
    cursor: auto;
}

a.nostyle:visited {
    text-decoration: inherit;
    color: inherit;
    cursor: auto;
}

然后我只是将 CSS nostyle 类添加到我想要取消格式化的锚点。

【讨论】：

即使没有:link（<a> 无论如何都是默认标签）也可以使用。
你可以结合这些来减少重复：a.nostyle:link, a.nostyle:visited { ... }
@AlexisWilke 使用 :link 指的是从未访问过 href 的链接。如果您想在没有 href 的情况下使用所有链接（我的首选是避免 '#' 引用导致页面 URL 的更改和其他副作用）。见w3schools.com/css/css_link.asp

【解决方案2】：

我通过创建一个类 .reset-a 并针对它的所有伪类来实现这一点。

定位所有伪类对于使其完美无缺很重要。

outline: 0 属性在链接处于焦点或活动状态时删除围绕链接的虚线边框。

.reset-a, .reset-a:hover, .reset-a:visited, .reset-a:focus, .reset-a:active  {
  text-decoration: none;
  color: inherit;
  outline: 0;
  cursor: auto;
}

【讨论】：

【解决方案3】：

如果您不关心 IE，可以将 :not(#exclude)（其中 exclude 是相关链接的 ID）附加到您的链接样式：

a:link:not(#exclude), a:visited:not(#exclude) {
    text-decoration: none;
    color: blue;
    cursor: pointer;
}

否则，我认为您无法按照您描述的方式进行暴力破解。您可以改用内联样式（不推荐），也可以使用分配给该链接的特殊类/ID，您可以将其选择器与body 分组。例如，如果您有以下样式：

body {
    text-decoration: none;
    color: black;
    cursor: auto;
}

a:link, a:visited {
    text-decoration: none;
    color: blue;
    cursor: pointer;
}

您可以简单地将与该链接匹配的更具体的选择器添加到 body 规则中：

body, #exclude {
    text-decoration: none;
    color: black;
    cursor: auto;
}

a:link, a:visited {
    text-decoration: none;
    color: blue;
    cursor: pointer;
}

【讨论】：