设置标题锚点时如何防止标题标签继承超链接样式

Posted 2023-03-05

【中文标题】设置标题锚点时如何防止标题标签继承超链接样式

【英文标题】：How to prevent heading tags from inheriting hyperlink styles when setting up heading anchors

【发布时间】：2016-12-14 07:16:19

【问题描述】：

抱歉，如果这是一个新手问题。我的部分工作是使用 Google 网站将传统的 Word 文档转换为在线 Web 文档。

我要迁移的文档通常有一个内容页、章节和节等。

在 html 中，我希望有一个内容页面，该页面提供指向各种文档部分和标题的可点击链接 - 我正在使用 HTML 锚点。

问题：我不希望被链接的文本继承随后的超链接样式。例如：

<div>
<h1>Contents page:</h1>
<p><a href="#heading">Section 1: Introduction</a><p>
</div>

<section>
<h1><a name="heading">Section1: Introduction</a></h1>

<p>Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim lectus eu risus tortor facilisi class, eleifend faucibus morbi pretium bibendum lobortis tellus hendrerit sociis litora etiam aliquet pharetra.</p>

</section>

现在标题标签由于属性而显示为超链接，这是我不想要的。相反，我希望它保留其默认标题样式，而无需我定义任何覆盖样式或类似的东西。

我在某处读过一些关于 'all:initial' 的内容，我不知道这些内容是否适用于 HTML5/CSS3。

我想知道这是否只是 Google 网站的问题，还是..？

有没有办法做到这一点？谢谢

【问题讨论】：

Check this answer

【参考方案1】：

CSS 方式就是：

a 
  color: inherit;
  text-decoration: none;

无论如何，如果你想内联，你可以使用：

<a style="all: inherit"></a>

<div>
<h1>Contents page:</h1>
<p><a href="#heading">Section 1: Introduction</a><p>
</div>

<section>

<h1><a name="heading" style="all: inherit">Section1: Introduction</a></h1>

<p>Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim lectus eu risus tortor facilisi class, eleifend faucibus morbi pretium bibendum lobortis tellus hendrerit sociis litora etiam aliquet pharetra.</p>

</section>

这使每个链接看起来都像普通文本。如果您只是希望您的命名锚标签没有样式（Chrome 上没有样式，所以我可能没有安静地回答您的问题......）使用@CBroe 的答案！这里不需要<a> 标签。只需命名<h1>。

【讨论】：

您好，感谢您的回答 - 谷歌网站只是不想接受此 html，只是显示错误代码“警告：您的 HTML 包含一些不允许的标签。这些已从您的更改中删除。'

什么是禁止标签？它们是否突出显示？

它们没有突出显示，但我认为它不太喜欢 'id' 属性，只是省略了它们。

好的...我已经将我的答案编辑回 name="" 解决方案...它现在可以工作还是 style 属性也被禁止？那样的话，我不知道你的问题能不能解决……

嗨，我刚试过 - 不幸的是，谷歌网站似乎去掉了一些 CSS/HTML，所以它甚至不接受 'all:inherit' 属性。不确定是否有任何解决方法..但感谢您的尝试。通常你的解决方案会起作用..

【参考方案2】：

<h1><a name="heading">Section1: Introduction</a></h1>

您无需使用<a name="heading"> 在页面内创建锚目标 - 每个具有 id 的元素也可以成为此类哈希锚链接的目标。

所以只需使用<h1 id="heading">Section1: Introduction</h1>，不会应用任何链接样式。

【讨论】：

您好，感谢您的回答，但是我之前尝试使用 'id' 属性，但它似乎不适用于谷歌网站：/ 我尝试在那里运行您的代码，不想接受锚点。

【参考方案3】：

考虑到 Google 协作平台的限制，我能想到的唯一解决方案是在您的 <h1> 标记中留空锚元素，如下所示：

<h1><a name="heading"></a>Section1: Introduction</h1>

你可以在里面放一个空格：