嵌套链接

前几天我发布了一张图片， 仅仅作为一个思维练习，关于如何实现“嵌套”链接。 也就是说，一个指向某个 URL 的大容器，里面包含指向另一个 URL 的较小容器或文本链接。 乍一看，这比看起来要难。 主要原因是...

<!-- this is invalid and won't render as expected -->
<a href="#one">
  Outside
  <a href="#two">
    Inside
  </a>
</a>

Eric Meyer 曾呼吁 更灵活的链接，但即使这样也不能完全处理一个链接嵌套在另一个链接中的情况。

顺便说一下，这就是该 HTML 代码的执行方式

我的第一想法是，在标记中不要嵌套链接，而是让它们在视觉上看起来嵌套。 有些人回复了这条推文，包括 Nathan Smith，他分享了同样的想法：有一个相对定位的父元素，并绝对定位这两个链接。 较大的链接可以填充整个区域，而较小的链接可以放在它的上面。

查看 Pen “嵌套”链接 由 Nathan Smith (@nathansmith) 在 CodePen 上创建。

它很挑剔，因为你需要在一定程度上使用 神奇数字 来处理间距和可变内容。

我的第二个想法是在 JavaScript 中处理它。

<div 
  onclick="window.location='https://codepen.io'"
  style="cursor: pointer;"
  tabindex="1"
>
  Outside
  <a href="https://css-tricks.org.cn">
    Inside
  </a>
</div>

我真不知道从无障碍的角度来说这是否合理。 在我看来，这很糟糕，所以我只能假设这是一个坏消息。

说到无障碍，Heydon Pickering 有 关于卡片组件的整篇文章，这是一个流行的设计模式，这种情况经常出现。 他的解决方案是使用一个相对定位的父元素，然后是一个正常放置且功能完备的主链接。 第一个链接有一个绝对定位的伪元素，它覆盖了整个卡片。 任何子链接都采用相对定位，并位于初始链接之后，因此它们可以通过 z-index 位于第一个链接的顶部。

说到堆叠伪元素，Sean Curtis 就在这里使用这种方法

查看 Pen 假装嵌套链接 由 Sean Curtis (@seancurtis) 在 CodePen 上创建。

在“巧妙”领域的其他解决方案可能是

• 使用 <form> 元素，其中 action 属性充当链接。
• 使用 <object> 元素 来包装内部链接。

Sara Soueidan 回复了自己的帖子！

几年前，当我为 Smashing Magazine 打造前端基础时，遇到了同样的需求。 所以我决定以博客文章的形式写下我对 Chris 线程的回应。

Sara 对此进行了更详细、更认真的描述，所以一定要看看。 看起来她和 Heydon 都采用了几乎相同的解决方案，使用伪元素覆盖，其中包含必要时伸出的子链接。

您是否尝试过其他方法？ 有很多 UX 和 a11y 要考虑！