是否允许在链接内嵌套链接？

Question

这可能看起来很基本，你可以在链接中放置一个链接吗？请参阅下面的附图：

我试图让整个灰色条可点击以转到某个地方，但如果用户点击滚轮或移动箭头，它们就是其他链接。查看我当前的代码：

 <a href="#" class="sp_mngt_bar">
    <h1><?php echo $v; ?></h1>
    <a href="#" class="t_icons t_icons_settings sp_mngt_settings"></a>
    <a href="#" class="t_icons t_icons_move sp_mngt_move"></a>
</a>

这是一个好习惯吗？我做错了吗？你会怎么做？谢谢您的帮助！

原文由 denislexic 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

直接来自 W3C for HTML4：

12.2.2 嵌套链接不合法

A 元素定义的链接和锚点不得嵌套； A 元素不得包含任何其他 A 元素。

由于 DTD 将 LINK 元素定义为空，因此 LINK 元素也不能嵌套。

HTML 5

而对于 HTML5 则有点不同。

您不能在 A 元素中包含 交互式内容。 交互式内容包括锚标记。

原文由 Josh 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

简单回答这个问题： 没有。

话虽如此，这是一个纯 html/css 解决方法：

https://codepen.io/pwkip/pen/oGMZjb

 .block {
  position:relative;
}

.block .overlay {
  position:absolute;
  left:0; top:0; bottom:0; right:0;
}

.block .inner {
  position:relative;
  pointer-events: none;
  z-index: 1;
}

.block .inner a {
  pointer-events: all;
}

 <div class="block">
  <a class="overlay" href="#overlay-link"></a>
  <div class="inner">
    This entire box is a hyperlink. (Kind of)<br><br><br><br>
    <a href="#inner-link">I'm a W3C compliant hyperlink inside that box</a>
  </div>
</div>

原文由 Jules Colle 发布，翻译遵循 CC BY-SA 4.0 许可协议