css - 使用超链接维护原始格式

Question

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

Answer 1

如果标记是

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

（它使用嵌套h4和a元素的有效方式），如果h4元素的颜色是黑色（默认），以下样式表将删除链接格式，使标题文本看起来就像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;
}

Answer 2

我不确定您的代码是什么样的，但是这样的结构可以防止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;
}