使用超链接维护原始格式答案

【问题标题】：Maintain Original Formatting with Hyperlinks使用超链接维护原始格式
【发布时间】：2014-04-17 00:02:38
【问题描述】：

我正在尝试在网页中设置指向同一页面部分的链接，但想保持原始文本格式，这是一个简单的 h4 标题。我尝试了很多事情，包括将 h4 设置和 text-decoration 设置为 none 样式，但是当链接中的下划线被删除时，它不会恢复为 h4 标题的颜色和大小。有没有办法做到这一点？

【问题讨论】：

标签： css hyperlink html-heading

【解决方案1】：

我不确定您的代码是什么样的，但这样的结构可以防止 h4 样式混乱 (jsFiddle)：

HTML：

<a href="#contact" class="self_page">
    <h4>Contact Us</h4>
</a>

CSS：

h4 {
    color:#666333;
    font-family:Georgia,serif;
}
a.self_page {
    text-decoration:none;
    color:inherit;
}

【讨论】：

【解决方案2】：

如果标记是

<h4><a href="...">Some heading</a></h4>

（使用了h4和a元素的有效嵌套方式），如果h4elements的颜色是黑色（默认），下面的样式表去掉链接格式，使标题文字看起来就像a 标记不存在一样：

h4 a {
  color: black;
  text-decoration: none;
}

如果h4 元素的颜色不是黑色，请修改设置其颜色的样式表规则，以便添加选择器h4 a。例如，如果是h4 { color: orange }，则将其更改为h4, h4 a { color: orange }。（您可以使用h4 a { color: inherit } 使链接继承其父级的颜色，但并非所有浏览器都支持inherit 值。）

如果您想在鼠标悬停时隐藏链接，当指针（在 CSS 术语中错误地称为“光标”）默认变为手时，您可以添加以下内容：

h4 a {
   cursor: text;
}

【讨论】：